html遮罩弹窗原理,带遮罩层的弹窗.html

button{

display: block;

margin: auto;

width: 100px;

height: 50px;

}

.tanchuang{

position: fixed;

width: 500px;

height: 200px;

top: calc(50% - 100px);

left: calc(50% - 250px);

background-color: #FFFFFF;

border: #ebebeb solid 1px;

display: none;

z-index: 999;

box-shadow: 0px 0px 20px #ddd;

}

.active{

position: relative;

width: 100%;

height: 50px;

border: #ebebeb solid 1px;

background-color: orange;

line-height: 50px;

text-align: center;

color: #FFFFFF;

cursor: move;

user-select: none;

}

.bg{

width: 100%;

height: 100%;

position: fixed;

top: 0px;

left: 0px;

background: #000000;

filter: alpha(opacity=30);

-moz-opacity: 0.3;

-khtml-opacity: 0.3;

opacity: 0.3;

z-index: 100;

display: none;

}

.active span{

position: absolute;

font-size: 12px;

right: -20px;

top: -30px;

background: #ffffff;

border: #ebebeb solid 1px;

width: 40px;

height: 40px;

border-radius: 20px;

text-align: center;

line-height: 40px;

}

.active span a{

text-decoration: none;

color: #000000;

}

点击,弹出

弹框

关闭

阿修罗

阿修罗

阿修罗

阿修罗

阿修罗

阿修罗

阿修罗

阿修罗

阿修罗

阿修罗

阿修罗

阿修罗

阿修罗

阿修罗

阿修罗

阿修罗

阿修罗

阿修罗

阿修罗

阿修罗

var tc=document.querySelector('.tanchuang');

var bg=document.querySelector('.bg');

function TanChuang(){

tc.style.display='block';

bg.style.display='block';

}

var close=document.querySelector('#closeBtn');

close.οnclick=function(){

tc.style.display='none';

bg.style.display='none';

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史