使背景黑色比彈出DIV

我具有以下的div對此我示出了作爲彈出屏幕其他：使背景黑色比彈出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>

當其示出，我可以容易地觀看在主背景屏幕的另一部分。

其觀看如下：

enter image description here

（入口已成功更新的是上面的彈出式DIV）

我不想顯示背景畫面時poup是存在的。

我想讓它黑色..

我怎樣才能讓黑？

我試圖設置不透明度爲0.75 ... ...但prooved misconceptual ......沒有解決我的目的..

我能爲它做些什麼???

請幫幫我。

來源

2014-04-24 C Sharper

你想使彈出背景上的黑色??? – Richa

@Richa不是poup背景...除了poup以外的其他東西 –

難道你不能只是'background-color：black;'？ – SaturnsEye

好吧這裏去！

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

我希望這有助於！

來源

2014-04-24 10:20:59 KM123

按原樣實施，謝謝:) –

完全沒有問題:) – KM123

這裏是我會做什麼：

創建fixed DIV 100％的寬度和高度;

將彈出式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; 
}

來源

2014-04-24 10:19:56 sabithpocker

您需要添加一個覆蓋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*/ 
}

來源

2014-04-24 10:19:57 Adamb89

試試這個

<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();

來源

2014-04-24 10:20:03

爲什麼不只是創建一個類來保持所有這些樣式？ –

如果您需要，請使用它。由於OP的問題只有HTML，所以我使用相同的格式，而不是將它寫入單獨的類:-) –

如果你想使用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"); 
     } 
     } 
    }); 
    });

在此，如果你點擊按鈕，或彈出式菜單之外，它關閉。您也不必編碼。短小精悍！

來源

2014-04-24 10:22:03

僅提供鏈接作爲答案？ –

不錯，很好的工作:-) –

@harsha鏈接是綽綽有餘我猜。 –

這裏有一個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%; 
}

來源

2014-04-24 10:24:52 mdesdev

使背景黑色比彈出DIV

回答

相關問題