模态触摸事件不适用于 Safari

Question

我在 JavaScript 中创建了模态弹出窗口。
我希望能够通过 clicking/touching 关闭弹出窗口之外的任何地方（弹出窗口位于 Z-Index 1 上）。不幸的是，它不会在 Safari 上关闭。
示例：

var modal = document.getElementById('myModal');
document.getElementById("modal-body").innerHTML += "hello!";
modal.style.display = "block";
window.onclick = function(event) {
  if (event.target === modal) {
    modal.style.display = "none";
  }
};

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  /* 15% from the top and centered */
  padding: 5%;
  /*20px;*/
  border: 1px solid #888;
  width: 90%;
  /* Could be more or less, depending on screen size */
}

<div id="main">
  I want to have popup closed when clicking whenever outside the popup
  <div id="popup"></div>

  <!-- The Modal -->
  <div id="myModal" class="modal">
    <div class="modal-content">
      <div id="modal-body">
      </div>
    </div>
  </div>
  <!-- end of modal -->

</div>

My JsFiddle Code

有什么想法吗？

Answer 1

试试看是否有效？！

var modal = document.getElementById('myModal');
document.getElementById("modal-body").innerHTML += "hello!";
modal.style.display = "block";
 

function DETECTBROWSER() {
 var HREFF,
  HREFTXT = "unknown";
 this.NAVIGATOR = navigator.userAgent;
 var NAV = navigator.userAgent;
 var gecko,
  navIpad,
  operatablet,
  navIphone,
  navFirefox,
  navChrome,
  navOpera,
  navSafari,
  navandroid,
  mobile,
  navMozilla,
  navUbuntu,
  navLinux;
 navLinux = NAV.match(/Linux/gi);
 navUbuntu = NAV.match(/Ubuntu/gi);
 gecko = NAV.match(/gecko/gi);
 navOpera = (NAV.match(/Opera|OPR\//) ? true : false);
 operatablet = NAV.match(/Tablet/gi);
 navIpad = NAV.match(/ipad/gi);
 navIphone = NAV.match(/iphone/gi);
 navFirefox = NAV.match(/Firefox/gi);
 navMozilla = NAV.match(/mozilla/gi);
 navChrome = NAV.match(/Chrome/gi);
 navSafari = NAV.match(/safari/gi);
 navandroid = NAV.match(/android/gi);
 mobile = NAV.match(/mobile/gi);
 window["TYPEOFANDROID"] = 0;
 window["NOMOBILE"] = 0;

 var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
 if (mobile) {
  var userAgent = navigator.userAgent.toLowerCase();
  if ((userAgent.search("android") > -1) && (userAgent.search("mobile") > -1)) {
   console.log("ANDROID MOBILE");
  } else if ((userAgent.search("android") > -1) && !(userAgent.search("mobile") > -1)) {
   console.log(" ANDROID TABLET ");
   TYPEOFANDROID = 1;
  }

 } else {
  NOMOBILE = 1;
 }
 //  FIREFOX za android
 if (navFirefox && navandroid && TYPEOFANDROID == 0) {
  HREFF = "#";
  HREFTXT = "mobile_firefox_android";
 }
 //  FIREFOX za android T
 if (navFirefox && navandroid && TYPEOFANDROID == 1) {
  HREFF = "#";
  HREFTXT = "mobile_firefox_android_tablet";
 }
 // OPERA ZA ANDROID
 if (navOpera && navandroid) {
  HREFF = "#";
  HREFTXT = "opera_mobile_android";
 } // provera
 // OPERA ZA ANDROID TABLET
 if (navOpera && navandroid && operatablet) {
  HREFF = "#";
  HREFTXT = "opera_mobile_android_tablet";
 } // provera
 //  safari mobile za IPHONE - i  safari mobile za IPAD i CHROME za IPAD
 if (navSafari) {
  var Iphonesafari = NAV.match(/iphone/gi);
  if (Iphonesafari) {
   HREFF = "#";
   HREFTXT = "safari_mobile_iphone";
  } else if (navIpad) {
   HREFF = "#";
   HREFTXT = "mobile_safari_chrome_ipad";
  } else if (navandroid) {
   HREFF = "#";
   HREFTXT = "android_native";
  }
 }
 // TEST CHROME
 if (navChrome && navSafari && navMozilla && TYPEOFANDROID == 1) {
  HREFF = "#";
  HREFTXT = "mobile_chrome_android_tablet";
 }
 if (navChrome && navSafari && navMozilla && TYPEOFANDROID == 0) {
  HREFF = "#";
  HREFTXT = "mobile_chrome_android";
 }
 if (navChrome && TYPEOFANDROID == 0) {
  HREFF = "#";
  HREFTXT = "chrome_browser";
 }
 if (navMozilla && NOMOBILE == 1 && gecko && navFirefox) {
  HREFF = "#";
  HREFTXT = "firefox_desktop";
 }
 if (navOpera && TYPEOFANDROID == 0 && !mobile) {
  HREFF = "#";
  HREFTXT = "opera_desktop";
 }

 //linux
 if (navUbuntu && navMozilla && navFirefox && navLinux) {
  HREFF = "#";
  HREFTXT = "firefox_desktop_linux";
 }
 if (navMozilla && navLinux && navChrome && navSafari) {
  HREFF = "#";
  HREFTXT = "chrome_desktop_linux";
 }
 if (navMozilla && navLinux && navChrome && navSafari && navOpera) {
  HREFF = "#";
  HREFTXT = "opera_desktop_linux";
 }

 /**
 * Template for this view's container...
 * NOMOBILE = 1 means desktop platform
 * @example This is ENUMERATORS for property NAME :
 * "mobile_firefox_android" 
 * "mobile_firefox_android_tablet" 
 * "opera_mobile_android" 
 * "opera_mobile_android_tablet"
 * "safari_mobile_iphone"
 * "mobile_safari_chrome_ipad"
 * "android_native"
 * "mobile_chrome_android_tablet"
 * "mobile_chrome_android"
 * "chrome_browser"
 * "firefox_desktop"
 * "opera_desktop"
 * "firefox_desktop_linux"
 * "chrome_desktop_linux"
 * "opera_desktop_linux" .
 * @property NAME
 * @type {String}
 * @default "unknown"
 */
 this.NAME = HREFTXT;
 /**
 * NOMOBILE = 1 Means desktop platform (Any win , mac or linux etc..)
 * NOMOBILE = 2 Means mobile platform (iOS , android etc.)
 * @property NOMOBILE
 * @type Number
 * @default "unknown"
 */
 this.NOMOBILE = NOMOBILE;
}


var BROWSER = new DETECTBROWSER();

if (NOMOBILE == 0) {
//MOBILE DEVICES

window.addEventListener("touchstart",  function(event) {
  
  if (event.target === modal) {
    modal.style.display = "none";
  }
  
} , false); 



}
else {

window.addEventListener("click",  function(event) {
  
  if (event.target === modal) {
    modal.style.display = "none";
  }
  
} , false); 

}

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  /* 15% from the top and centered */
  padding: 5%;
  /*20px;*/
  border: 1px solid #888;
  width: 90%;
  /* Could be more or less, depending on screen size */
}

<div id="main">
  I want to have popup closed when clicking whenever outside the popup
  <div id="popup"></div>

  <!-- The Modal -->
  <div id="myModal" class="modal">
    <div class="modal-content">
      <div id="modal-body">
      </div>
    </div>
  </div>
  <!-- end of modal -->

</div>

模态触摸事件不适用于 Safari

Modal touch event not working on Safari

html

javascript

css

modal-dialog

z-index