Question

我有以下div显示为popup：

    <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>

当显示时，我可以在主背景中轻松查看屏幕的其他部分。

观看如下：

enter image description here

（条目成功更新是上面的弹出式div）

当poup在那里时，我不想显示背景屏幕。

我想让它变黑..

我怎么能让它变黑？

我尝试将不透明度设置为0.75 ......但这种错误概念......并没有解决我的目的..

我能为它做些什么？

请帮帮我。

Answer 1

好的，好了！

<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>

我希望这有帮助！

Answer 2

以下是我要做的事情：

创建一个宽度和高度均为100％的fixed div;

将弹出式div放在此固定overlay内并水平和垂直居中。

<div class="overlay">
    <div class="popup">
        Whatever code!!
    </div>
</div>

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;
}

Answer 3

这是 FIDDLE

if($('#divOperationMessage').length > 0 && $('.mask').length < 1) {
   $('body').append('<span class="mask"></span>'); 
}

.mask {
  background: rgba(0,0,0,0.8);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Answer 4

您需要添加一个叠加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*/
}

Answer 5

试试这个

<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>

每当您显示弹出窗口时，请添加此行

$('.black_bg').show();

Answer 6

如果您想使用jquery，可以使用jquery 模态功能。

易于使用！

点击此处：

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" );
        }
      }
    });
  });

在此，如果您单击按钮，或在弹出菜单外部，它将关闭。您也不必编写代码。简短而紧凑！

为弹出div以外的屏幕制作背景黑色

6 个答案: