更改顯示從塊到無，顯示div

問題這是我在這裏的第一個問題，我試圖搜索相當一段時間了，我還沒有發現任何問題與我的相同或觸及同樣的問題。更改顯示從塊到無，顯示div

我想做一個CSS彈出窗口，它有一個覆蓋整個網站的背景div和一個顯示實際內容的居中的div。

我的問題是，當我點擊應該顯示他們兩個的按鈕時，只有居中的div顯示出來。即使我註釋掉我的css文件中的display:none - 屬性，背景div也沒有附加任何顏色或樣式。如果我用文本填充，文本顯示在網站上div應該是「假定」的，如果沒有任何樣式表附加到它。

我已經從coder的代碼中獲得了代碼this question。

這就是：

腳本：

$("#btn-update").click(function() { 
     document.getElementById("light").style.display="block"; 
     document.getElementById("blackground").style.display="block"; 
});

HTML：

<button type="button" id="btn-update">Button!</button> 
<div id="light" class="white_content">This is the lightbox content. <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div> 
<div id="blackground" class="black_overlay"></div>

CSS：

.black_overlay{ 
    /*display: none;*/ 
    position: absolute; 
    top: 10%; 
    left: 10%; 
    width: 100%; 
    height: 100%; 
    background-color: #000000; 
    z-index:1001; 
    /*-moz-opacity: 0.8;*/ 
    /*opacity:.80;*/ 
    /*filter: alpha(opacity=80);*/ 
} 
.white_content { 
    display: none; 
    position: absolute; 
    top: 25%; 
    left: 25%; 
    width: 15%; 
    height: 15%; 
    padding: 16px; 
    border: 16px solid orange; 
    background-color: white; 
    z-index:1002; 
    overflow: auto; 
}

Here's the fiddle-demo so you can play around as well

我試圖改變屬性，註釋出來，使得DIV可見從一開始走，但它似乎總是不能正常顯示（而white_content總是這樣）。

另外： JS小提琴有問題顯示白色內容，但是當您刪除display:none屬性時黑色覆蓋圖顯示得很好。

非常感謝您的幫助。一直停留了一段時間了

來源

2014-01-31 Avslutarn

你應該爲了使用它選擇了jQuery庫作爲框架（下拉左側）時</head>相同的代碼無法正常工作。 –

您需要的jquery plugin附上的jsfiddle http://jsfiddle.net/dhana36/K57DH/12/

更新後http://jsfiddle.net/dhana36/K57DH/20/

UPDATE：

HTML代碼：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.black_overlay{ 
/* display: none;*/ 
    position: absolute; 
    top: 10%; 
    left: 10%; 
    width: 50%; 
    height: 50%; 
    background-color: #000000; 
    z-index:1001; 
/* -moz-opacity: 0.8;*/ 
/* opacity:.80;*/ 
/* filter: alpha(opacity=80);*/ 
} 
.white_content { 
    display: none; 
    position: absolute; 
    top: 25%; 
    left: 25%; 
    width: 15%; 
    height: 15%; 
    padding: 16px; 
    border: 16px solid orange; 
    background-color: white; 
    z-index:1002; 
    overflow: auto; 
} 

</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
    $("#btn-update").click(function() { 
    document.getElementById("light").style.display="block"; 
    document.getElementById("blackground").style.display="none"; 
    //document.getElementById("blackground").style.background-color="#555555"; 
}); 
}); 
</script> 
</head> 
<body> 
<div id="light" class="white_content"> 
    This is the lightbox content. 
    <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('blackground').style.display='block'"> 
     Close 
    </a> 
</div> 
<div id="blackground" class="black_overlay"></div> 

<button type="button" id="btn-update">Button!</button> 
</body> 
</html>

來源

2014-01-31 08:22:53 dhana

謝謝，現在它在小提琴中奏效。但不是在我的Chrome瀏覽器。任何想法？這只是其中一個瀏覽器問題，它在一個而不是另一箇中運行？ – Avslutarn

我在Chrome中檢查了你的代碼。它工作正常。 – dhana

@Avslutarn他們的意思是把''放在你的''中。 – Ruddy

添加腳本在關閉之前</body>不在裏面在左邊的面板中head http://jsfiddle.net/K57DH/18/編輯包裹

來源

2014-01-31 08:29:03 VenomVendor

更改顯示從塊到無，顯示div

回答

相關問題