html、css和js原生写一个模态弹出框,顺便解决父元素半透明子元素不透明效果
2021-05-19 13:27
标签:bug java ext htm get 隐藏 top idt 继承 模态框: html部分: css部分: JavaScript: html、css和js原生写一个模态弹出框,顺便解决父元素半透明子元素不透明效果 标签:bug java ext htm get 隐藏 top idt 继承 原文地址:http://www.cnblogs.com/yuanxinru321/p/7717595.html
button id="box" onclick="pop_box()">弹出框button>
div class="div-container" id="div-container" style="display: none;">
div class="div-child-container">
div class="div-child">
span>hhhhhspan>
div class="my-btn">
button id="cancleBtn" onclick="cancle()">取消button>
button id="confrim" onclick="confrim()">确认button>
div>
div>
div>
div>
{
width: 80px;
height: 40px;
background: #fd7430;
border:none;
border-radius: 5px;
outline: none;
color: #fff;
}
.div-container{
position: fixed;
top: 0%;
width: 100%;
height: 100%;
z-index:200;
background: rgba(0,0,0,0.5) !important;/* 兼容ie几不知道,好像ie5 */
background:#000;
filter:Alpha(opacity=60);
}
/*设置div-child的父元素主要是将要此元素的父元素透明特性继承过来,故div-child不会半透明,而是不透明,解决了父元素透明,子元素也透明的bug */
.div-child-container{
position: relative;
width: 400px;
height: 200px;
margin: auto;
top: 30%;
background: #fff;
z-index: 250; /*z-index要放在父元素之上 */
}
.div-child{
width: 400px;
height: 200px;
margin: auto;
background: #fff;
z-index: 300; /*z-index要放在父元素之上 */
text-align: center;
}
.div-child span{
position: relative;
top: 40px;
}
.div-child .my-btn{
margin-top: 80px;
}
.div-child .my-btn button{
width: 80px;
height: 40px;
background:#fd7430;
border: none;
border-radius: 5px;
color: #fff;
outline: none;
}
.div-child .my-btn button:first-child(){
margin-right: 20px;
}
文章标题:html、css和js原生写一个模态弹出框,顺便解决父元素半透明子元素不透明效果
文章链接:http://soscw.com/index.php/essay/87654.html