<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>遮罩</title>
<style type="text/css">
.wrapper {
border: 1px solid blue ;
height: 500px ;
font: 100px/500px '宋体';
text-align: center ;
}
.odd { background: #dfdfdf ; }
.even { background: #ffff00 ; }
.buttons {
position: fixed ;
left: 0;
bottom: 5px;
width: 100% ;
background: rgba(188,188,188,0.5);;
text-align: center ;
}
.buttons>.btn-mask {
display: inline-block ;
margin: 5px ;
border: 1px solid #4848f3 ;
border-radius: 3px;
padding: 5px ;
font-size: 16px;
color: #fff ;
text-decoration: none ;
user-select: none ;
background: #6666f7;
}
.buttons>.btn-mask:hover {
background: #4848f3;
color: #ffff00;
}
.mask {
position: fixed ;
left: 0 ;
top: 0 ;
width: 100% ;
height: 100% ;
background: rgba(200,200,200 , 0.5);
}
.mask-hide {
display: none ;
}
.mask-show {
display: block ;
}
.dialog {
position: absolute ;
left: 50% ;
top: 50% ;
width: 300px ;
height: 200px ;
margin-left: -150px;
margin-top: -100px;
background: #fff ;
border: 1px solid #dedede ;
border-radius: 5px ;
box-shadow: 0 0 5px 4px #ff0 ;
}
.dialog>.title-bar {
height: 30px ;
background: #dfdfdf ;
}
.dialog .title-bar>* {
height: 30px ;
line-height: 30px ;
}
.dialog .title-bar>.icon {
float: left;
width: 30px ;
text-align: center;
}
.dialog .title-bar>.title {
float: left;
width: 240px ;
text-align: left ;
}
.dialog .title-bar>.btn-close {
float: left;
width: 30px ;
text-align: center;
user-select: none ;
}
.dialog .title-bar>.btn-close:hover {
background: #ccc;
}
</style>
<script type="text/javascript">
( function(){
let maskListener = {
handleEvent(e){
e.preventDefault();
let m = document.querySelector( '.mask' );
m.classList.replace( 'mask-hide' , 'mask-show' );
}
}
let closeListener = {
handleEvent(e){
e.preventDefault();
let m = document.querySelector( '.mask' );
m.classList.replace( 'mask-show' , 'mask-hide' );
}
}
let loadListener = function(){
const b = document.body ;
for( let i = 1 ; i <= 10 ; i++ ){
let e = document.createElement( 'div' );
let list = e.classList ;
list.add( 'wrapper' );
list.add( i % 2 == 0 ? 'even' : 'odd' );
e.innerHTML = i ;
b.appendChild( e );
}
const maskBtn = document.querySelector( '.btn-mask' );
maskBtn.addEventListener( 'click' , maskListener , false );
const closeBtn = document.querySelector( '.btn-close' );
closeBtn.addEventListener( 'click' , closeListener , false );
}
window.addEventListener( 'load' , loadListener , false );
} )();
</script>
</head>
<body>
<div class="buttons">
<a href="http://www.kaifamiao.com" class="btn-mask">弹出遮罩层</a>
</div>
<div class="mask mask-hide">
<div class="dialog">
<div class="title-bar">
<span class="icon">?</span>
<span class="title">你有对象吗?</span>
<span class="btn-close">X</span>
</div>
<div class="content">
如果没有的话，可以自己 new 几个。
</div>
</div>
</div>
</body>
</html>
