javascript自定义警报框透明度问题 [英] javascript custom alert box transparency issue
问题描述
我正在尝试使用CSS和Javascript来执行基于图片的自定义提醒框。我几乎按照我想要的方式工作。一直困扰着我的问题是，这个盒子正在分享覆盖层的透明度。设置不透明度框不起作用，从叠加层巢中移除框代码会使覆盖层覆盖框，即使z-index设置不正确。
这里应该是相关的CSS代码：
#popUpDisplay {
display：none;
不透明度：.8;
位置：固定;
top：0;
剩下：0;
宽度：100％;
身高：100％;
背景：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 {
/ *可以切换到图片* /
颜色：白色;
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;
$ / code $ / pre
$ b $ p
函数DlgShow（消息）{
//更改消息。
var Msg = document.getElementById（DlgContent）;
Msg.innerHTML =信息;
//显示对话框。
var Dlg_bg = document.getElementById（popUpDisplay）;
var Dlg = document.getElementById（popUpTemplate）;
Dlg_bg.style.display =inline;
Dlg.style.display =inline;
$ b函数DlgHide（）{
var Dlg_bg = document.getElementById（popUpDisplay）;
var Dlg = document.getElementById（popUpTemplate）;
Dlg.style.display =none;
Dlg_bg.style.display =none;
$ / code $ / pre
$ b $ p 这里是HTML < div id =popUpDisplay>
< div id =popUpTemplate>
< div id =popUpBackground>
< div id =popUpBanner>
< h3 id =DlgContent>测试文字< / h3>
< / div>
< div id =popUpContent>
< p> Lorem ipsum dolor坐在amet，consectetur adipiscing elit。 Integer rutrum risus metus，一种交通工具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争辩说，必须要做到这一点。< / p>
< a href =javascript：DlgHide.ok（）;>关闭< / A>
< / div>
< / div>
< / div>
< / div>
< h1> HTML测试页< / h1>
< p>本页严格用于在不影响预先存在的页面的情况下在页面上进行测试。< / p>
< a href =javascript：DlgShow（）;>打开< / a>
这不太好，我需要处理显示的信息，但我只想知道它所以它显示正确。
解决方案这是因为您的内容 div 是透明 div 的孩子。 （因此从 #popUpDisplay ）继承了 opacity 。）这就是为什么像Bootstrap这样的框架在之前放置了一个模态叠加层而不是周围）模式的内容 div 。
我只会更新您的CSS以使用<$ c $在 #popUpDisplay 的背景上使用c> rgba
：
#popUpDisplay {
display：none;
/ *不透明度：.8; < - 删除此* /
位置：固定;
top：0;
剩下：0;
宽度：100％;
身高：100％;
背景：rgba（211,211,211，.8）; / *< - 更改此* /
z-index：8;
}
I'm trying to do an image-based custom alert box using CSS and Javascript. I almost have it working the way I want it to. The issue that's been plaguing me is that box is sharing the overlay's transparency. Setting the box' opacity does nothing and removing the box code from its overlay "nest" makes the overlay cover the box even if the z-index is set up otherwise.
Here should be the relevant CSS Code:
#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;
}
Here's the 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";
}
And here's the 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>
It's not pretty, and I need to work on the message displayed, but I just want to get it so it displays correctly.
解决方案 This is because your content div is a child of the transparent div. (And thus inherits the opacity from #popUpDisplay.) Which is why frameworks like Bootstrap place a modal-overlay before (not around) the content div of a modal.
I would just update your CSS to use rgba on the background of #popUpDisplay:
#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;
}
这篇关于javascript自定义警报框透明度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
