html、css和js原生写一个模态弹出框,顺便解决父元素半透明子元素不透明效果

2021-05-19 13:27

阅读:498

标签:bug   java   ext   htm   get   隐藏   top   idt   继承   

模态框:

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>

css部分:

{
            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;
        }
    

JavaScript:

 

html、css和js原生写一个模态弹出框,顺便解决父元素半透明子元素不透明效果

标签:bug   java   ext   htm   get   隐藏   top   idt   继承   

原文地址:http://www.cnblogs.com/yuanxinru321/p/7717595.html


评论


亲,登录后才可以留言!