javascript 禁用或不可访问的弹出背景区域
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17424430/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable or non-accessible popup background area
提问by Sachin
I have following html structure :
我有以下 html 结构：
<div id="content">
<!-- data -->
<div id="popup"></div>
<!-- data -->
</div>
I am displaying my popup on page load , but at the same time I want to disable background area . My popup box is appearing on z-index , and rest background area should be non-accessible at this time .
我在页面加载时显示我的弹出窗口，但同时我想禁用背景区域。我的弹出框出现在 z-index 上，此时其余背景区域应该是不可访问的。
How can I achieve this ?
我怎样才能做到这一点？
I am using this css style :
我正在使用这种 css 样式：
#popup {
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
background: none repeat scroll 0 0 rgb(36, 35, 35);
border: 5px solid rgb(5, 5, 5);
border-radius: 3px 3px 3px 3px;
color: #333333;
font-size: 14px;
left: 50%;
margin-left: -402px;
position: fixed;
top: 250px;
height: 150px;
width: 600px;
z-index: 2;
padding: 50px;
}
回答by Luc
You will need a div to cover the entire window.
您将需要一个 div 来覆盖整个窗口。
This will not be enough though since a user might still use the keyboard to navigate in the background. You would have to iterate all the a/input/button/select elements on the page and add an tab-index attribute set to -1. When you hide the pop-up they should remove the 'tab-index' attribute.
但这还不够，因为用户可能仍会使用键盘在后台导航。您必须迭代页面上的所有 a/input/button/select 元素并添加设置为 -1 的 tab-index 属性。当您隐藏弹出窗口时，他们应该删除“tab-index”属性。
The reason for the tab-index manipulation is also one of accessibility. A user that navigates through the keyboard will have a hard time navigating content inside of your pop-up if you let them navigate in the background.
标签索引操作的原因也是可访问性之一。如果您让他们在后台导航，则通过键盘导航的用户将很难导航弹出窗口内的内容。
So, how would we go about constructing this? Just to set you off:
那么，我们将如何构建这个呢？只是为了让你失望：
Html:
网址：
<div id="popup" class="popup">
<div class="cover"></div>
<div class="popupBody">
...
</div>
</div>
Css:
css：
.popup {
background-color:black;display:none;
position:fixed;
left:0;right:0;top:0;bottom:0;
z-index:3000;
opacity:0.5;
}
js+ jQuery for adding tabindex:
用于添加 tabindex 的 js+ jQuery：
$('input, a, button, select').each(function () {
$(this).attr('tabindex', '-1');
});
Note: Here the popup is the 'cover', with popupBody being the actual popup, uggly but working jsfiddle: http://jsfiddle.net/mjfag/1
注意：这里的弹出窗口是“封面”，popupBody 是实际的弹出窗口，丑陋但有效的 jsfiddle：http: //jsfiddle.net/mjfag/1
An alternative wouldbe to use the JQuery UI module for modal dialogues. That does nothing for the keyboard-navigation though but if that is of no concern all the other stuff is already done for you.
另一种方法是使用 JQuery UI 模块进行模态对话。虽然这对键盘导航没有任何作用，但是如果这无关紧要，那么所有其他东西都已经为您完成了。
Edit: After some quick testing with a newer version of jQuery UI it seems like they've started handling the keyboard to.
编辑：在使用较新版本的 jQuery UI 进行一些快速测试后，他们似乎已经开始处理键盘了。
回答by sangram parmar
try this
试试这个
<div class="modalpopup">
<div class="modal-backdrop fade in">//for background disable
</div>
<div
class="modal hide fade in" id="myModal" style="display: block;">
<div class="modal-header">
<h3 id="myModalLabel">
Modal Heading</h3>
</div>
<div class="modal-body">
<h4>
Popover in a modal</h4>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn">
Close</button>
<button class="btn btn-primary">
Save changes</button>
</div>
</div>
</div>
<style>
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000000;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop,
.modal-backdrop.fade.in {
opacity: 0.8;
filter: alpha(opacity=80);
}
.modal {
position: fixed;
top: 10%;
left: 50%;
z-index: 1050;
width: 560px;
margin-left: -280px;
background-color: #ffffff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
*border: 1px solid #999;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
outline: none;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.modal.fade {
top: -25%;
-webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
-moz-transition: opacity 0.3s linear, top 0.3s ease-out;
-o-transition: opacity 0.3s linear, top 0.3s ease-out;
transition: opacity 0.3s linear, top 0.3s ease-out;
}
.modal.fade.in {
top: 10%;
}
.modal-header {
padding: 9px 15px;
border-bottom: 1px solid #eee;
}
.modal-header .close {
margin-top: 2px;
}
.modal-header h3 {
margin: 0;
line-height: 30px;
}
.modal-body {
position: relative;
max-height: 400px;
padding: 15px;
overflow-y: auto;
}
.modal-form {
margin-bottom: 0;
}
.modal-footer {
padding: 14px 15px 15px;
margin-bottom: 0;
text-align: right;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
*zoom: 1;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
}
.modal-footer:before,
.modal-footer:after {
display: table;
line-height: 0;
content: "";
}
.modal-footer:after {
clear: both;
}
.modal-footer .btn + .btn {
margin-bottom: 0;
margin-left: 5px;
}
.modal-footer .btn-group .btn + .btn {
margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
margin-left: 0;
}
</style>
回答by Amandeep Singh
You need to completely cover the div: #contentwith some other div.
您需要 用其他一些 div完全覆盖 div: #content。
Here's the Complete HTML Code :
这是完整的 HTML 代码：
<html>
<head>
<title>Pop Up Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
#main {
width: 100%;
height: 100%;
background-color: #EFEFEF;
padding: 50px;
font-size: 14px;
font-weight: bold;
}
#enclosePopUp {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
opacity: 1;
filter: alpha(opacity = 100);
display: none;
z-index: 2;
}
#popup {
position: absolute;
_position: absolute; /* hack for internet explorer 6 */
height: 45px;
width: 295px;
background: #FFFFFF;
left: 500px;
top: 250px;
text-align: center;
border: 2px solid #BDBDBD;
padding: 15px;
font-size: 15px;
-moz-box-shadow: 0 0 5px #D8D8D8;
-webkit-box-shadow: 0 0 5px #D8D8D8;
box-shadow: 0 0 5px #D8D8D8;
}
#disabledLink {
display: none;
}
</style>
<script type="text/javascript">
function loadPopUp() {
$('#enclosePopUp').fadeIn("slow", function() {
$("#main").css({
"opacity" : "0.3",
"z-index" : "1"
});
$("#disabledLink").show();
});
}
function unLoadPopUp() {
$('#enclosePopUp').fadeOut("slow", function() {
$("#main").css({
"opacity" : "1"
});
$("#disabledLink").hide();
});
}
</script>
</head>
<body>
<div id="main">
<a href="#" onclick="return loadPopUp();">Click here to show PopUp</a>
<br> <a id="disabledLink" href="http://www.google.com">Google.com</a>
</div>
<div id='enclosePopUp'>
<div id="popup">
This is a pop up with disabled background. <br> <a href="#"
onclick="return unLoadPopUp();">Close</a>
</div>
</div>
</body>
</html>
