我在JavaScript中创建了模态弹出窗口。
我希望能够通过点击/触摸它之外的任何地方来关闭弹出窗口（弹出窗口在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>
有什么想法吗？
答案 0 :(得分：0)
尝试并告诉它是否有效？！
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>