javascript 将弹出 div 以外的屏幕的背景设为黑色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23266019/
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
Make Background Black for screen other than popup div
提问by C Sharper
I have following div which i am showing as popup:
我有以下 div，我显示为弹出窗口：
<div id="divOperationMessage" style="background-color: White; border: 2px solid black;
display: block; width: 350px; z-index: 1001; top: 60px; left: 240px; position: fixed;
padding-left: 10px;margin:auto;">
------------------Whatever content inside-----------------------------
</div>
When its shown, i can easily view other part of screen in the main background.
当它显示时，我可以轻松地在主背景中查看屏幕的其他部分。
Its viewing as below:
其视图如下：
(Entry updated sucessfully is popup div above)
（更新成功的条目是上面的弹出div）
I dont want to show background screen when poup is there.
当 poup 存在时，我不想显示背景屏幕。
I want to make it black..
我想变黑。。
How can i make it black??
怎么弄黑啊？？
I tried with setting opacity to 0.75 ... but that prooved misconceptual...did not solved my purpose..
我尝试将不透明度设置为 0.75 ......但这证明是误解......并没有解决我的目的......
What can i do for it???
我能为它做什么？？？
Please help me.
请帮我。
采纳答案by KM123
Okay here goes!
好的，这就去！
<div style="height:100%;width:100%;position:absolute;top:0;left:0;background-color:#000000;display:none;">
<div id="divOperationMessage" style="background-color: White; border: 2px solid black;
display: block; width: 350px; z-index: 1001; top: 60px; left: 240px; position: fixed;
padding-left: 10px;margin:auto;">
------------------Whatever content inside-----------------------------
</div>
</div>
I hope this helps!
我希望这有帮助！
回答by sabithpocker
Here is what I would do:
这是我会做的：
Create a fixeddiv with 100% width and height;
创建一个fixed100% 宽度和高度的div；
put the popup div inside this fixed overlayand center it horizontally and vertically.
将弹出的 div 放在这个固定的内部overlay并水平和垂直居中。
<div class="overlay">
<div class="popup">
Whatever code!!
</div>
</div>
css
css
.overlay{
position:fixed;
z-index:999;
width:100%;
height:100%;
background-color: black;
background-color:rgba(0,0,0,.75)
}
.popup{
width:300px;
position:absolute;
left:50%;
top:100px;
margin-left:-150px;
}
回答by mdesdev
回答by Nevin Madhukar K
If you wanna use jquery,you can use jquery modal feature.
如果你想使用 jquery，你可以使用 jquery模态功能。
Easy to use!
使用方便！
Check here:
在这里检查：
http://jqueryui.com/dialog/#modal
http://jqueryui.com/dialog/#modal
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
In this,if you click on the button,or outside of the popup menu,it closes. You don't have to code down that too. Short and compacT!
在这种情况下，如果您单击按钮或弹出菜单之外，它会关闭。你也不必编码。短小精悍！
回答by Adamb89
You need to add an overlay div to place over the main content, and below the popup div.
您需要添加一个覆盖 div 以放置在主要内容之上，并在弹出 div 之下。
div.overlay {
position: fixed;
width: 100%;
height: 100%;
display: block;
top: 0;
left: 0;
background-color: rgba(0,0,0,.75); /*this sets the slightly see-through black*/
z-index: 100; /*Make this less than the existing popup div*/
}
回答by Harsha Venkatram
Try this
试试这个
<div id="divOperationMessage" style="background-color: White; border: 2px solid black;display: block; width: 350px; z-index: 1001; top: 60px; left: 240px; position: fixed;padding-left: 10px;margin:auto;">
------------------Whatever content inside-----------------------------
</div>
<div class = 'black_bg' style = "position:fixed;width:100%;height:100%;opacity:0.75;background-color:#000"></div>
And whenever you are showing the popup , add this line
每当您显示弹出窗口时，添加此行
$('.black_bg').show();
