javascript自定義提醒框透明度問題

我正在嘗試使用CSS和Javascript來執行基於圖像的自定義提醒框。我幾乎按照我想要的方式工作。一直困擾着我的問題是，這個盒子正在分享覆蓋層的透明度。設置「不透明度」框不起作用，從疊加層「巢」中移除框代碼會使覆蓋層覆蓋框，即使z-index設置不正確。javascript自定義提醒框透明度問題

這裏應該是相關的CSS代碼：

#popUpDisplay { 
    display: none; 
    opacity: .8; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: lightgray; 
    z-index: 8; 
} 

#popUpTemplate { 
    display: none; 
    opacity: 1.0; 
    z-index: 10; 
} 

#popUpBackground { 
    display: block; 
    margin-top: 10%; 
    margin-left: auto; 
    margin-right: auto; 
    width: 495px; 
    height: 450px; 
    padding-top: 1px; 
    background-image: url("../images/popUp_bg.png"); 
    text-align: center; 
    z-index: 10; 
} 

#popUpBanner { 
    width: 455px; 
    height: 86px; 
    margin-left: auto; 
    margin-right: auto; 
    background-image: url("../images/popUp_banner.png"); 
    text-align: center; 
} 

#bannerText { 
    /* May switch to image */ 
    color: white; 
    margin-top: 10px; 
    padding-top: auto; 
    padding-bottom: auto; 
} 

#popUpContent { 
    width: 450px; 
    height: 347px; 
    margin-top: 10px; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
}

這裏是JavaScript的：

function DlgShow(Message){ 
    // Change the message. 
    var Msg = document.getElementById("DlgContent"); 
    Msg.innerHTML = Message; 

    // Display the dialog box. 
    var Dlg_bg = document.getElementById("popUpDisplay"); 
    var Dlg = document.getElementById("popUpTemplate"); 
    Dlg_bg.style.display = "inline"; 
    Dlg.style.display = "inline"; 

} 


function DlgHide(){ 
    var Dlg_bg = document.getElementById("popUpDisplay"); 
    var Dlg = document.getElementById("popUpTemplate"); 
    Dlg.style.display = "none"; 
    Dlg_bg.style.display = "none"; 

}

而這裏的HTML

<div id="popUpDisplay"> 
    <div id="popUpTemplate"> 
     <div id="popUpBackground"> 
      <div id="popUpBanner"> 
       <h3 id="DlgContent">Test Text</h3> 
      </div> 
      <div id="popUpContent"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum risus metus, a vehicula nibh molestie ac. Duis sollicitudin libero eget nunc maximus auctor. Sed eu commodo arcu. Quisque finibus pellentesque pharetra. Vestibulum quam mi, malesuada vitae sem eget, eleifend mattis nisi. Nunc ac tristique nunc. Morbi blandit justo eleifend dui malesuada, quis varius diam tincidunt. Quisque gravida posuere urna eget ultricies. Nullam ut euismod lectus. Donec congue ex quis elementum dignissim.</p> 

       <a href="javascript:DlgHide.ok();"> Close</a> 
      </div> 
     </div> 
    </div> 
</div> 

    <h1>HTML Test Page</h1> 
    <p>This Page is strictly for testing things on a page without effecting a pre-existing page.</p> 

    <a href="javascript:DlgShow();">Open</a>

這不是漂亮，而且我需要工作在顯示的信息上，但我只是想獲得它，所以它顯示正確。

來源

2015-05-11 CaptObvious42

所以'＃popUpBackground'應顯示背後'＃popUpDisplay'。那是對的嗎？ –

您應該發佈JSFiddles，以瞭解諸如在HTML/CSS中格式化等問題。 [這是看起來像什麼]（https://jsfiddle.net/5eksu5y1/1/）（我們也可以在這裏看到關閉鏈接的錯誤代碼）。另外請注意，您的本地圖片顯然將不得不在其他地方託管（例如，上傳到Imgur）。這可以讓你確保你已經發布了所有相關的工作代碼，並且讓我們嘗試做一些小的修改，看看我們能否找到問題所在。從這個例子和你的文本，我不確定你在找什麼。 – Kat

這是因爲您的內容div是透明的div的孩子。（因此從#popUpDisplay繼承opacity。）這就是爲什麼像Bootstrap這樣的框架在模式的內容div之前（而不是周圍）放置模態重疊。

我只想更新您的CSS來對#popUpDisplay背景使用rgba：

#popUpDisplay{ 
    display: none; 
    /* opacity: .8; <-- remove this */ 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(211, 211, 211, .8); /* <-- change this*/ 
    z-index: 8; 
}

來源

2015-05-11 17:03:54

這個技巧。謝謝！ – CaptObvious42

javascript自定義提醒框透明度問題

回答

相關問題