模态框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模态框</title>
<style>
*{
padding: 0;
margin: 0;
}
.demo-wrap{
margin: 0 auto;
padding: 50px;
text-align: center;
}
.dialog-wrap{
z-index: 1000;
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
margin: 0;
}
/* 模态框背景 */
.dialog-fade{
z-index: 999;
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: .5;
background: #000;
}
.message-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40%;
border-radius:4px;
background-color: #fff;
border: 1px solid #ebeef5;
font-size: 18px;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
text-align: left;
overflow: hidden;
backface-visibility: hidden;
z-index:1002;
overflow: auto;
padding-bottom: 10px;
font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
}
.message-box__header{
position: relative;
padding: 10px 16px;
}
.message-box__title{
font-size: 18px;
color: #303133;
}
.message-box__headerbtn{
background-image: url("./img/message-close.png");
border: none;
cursor: pointer;
height: 20px;
opacity: 0.9;
width: 20px;
background-size:cover;
border-radius:20px;
position: absolute;
right: 12px;
top: 12px;
background-color: transparent;
}
.message-box__content{
font-size: 14px;
color: #606266;
/* margin-top: 20px; */
min-height: 180px;
max-height: 500px;
overflow-y: auto;
margin: 10px 16px;
}
.message-box__content li{
padding: 3px 0;
}
.message-box__content .content_span{
display: inline-block;
min-width: 40px;
text-align: right;
padding-right: 16px;
}
.message-box__btns{
text-align: right;
padding-right: 24px;
}
.message-box .box-button{
display:inline-block;
line-height:1;
white-space:nowrap;
cursor:pointer;
background:#FFF;
border:1px solid #DCDFE6;
color:#606266;
-webkit-appearance:none;
text-align:center;
-webkit-box-sizing:border-box;
box-sizing:border-box;
outline:0;margin:0;
-webkit-transition:.1s;
transition:.1s;
font-weight:500;
padding: 9px 15px;
font-size: 12px;
border-radius: 3px;
}
.message-box__btns button:nth-child(2) {
margin-left: 10px;
}
.message-box .button--primary{
color: #fff;
background-color: #409eff;
border-color: #409eff;
}
.message-box .button--primary:hover{
background:#66b1ff;
border-color:#66b1ff;
color:#FFF
}
.message-box .button--deafult::before{
background:rgba(220,223,230,.5)
}
</style>
</head>
<body>
<div class="demo-wrap">
<h1>模态框！！</h1>
<button id="btn">click！</button>
</div>
<div class="dialog-wrap">
<div class="message-box">
<div class="message-box__header">
<div class="message-box__title">模态框title</div>
<button class="message-box__headerbtn"></button>
</div>
<div class="message-box__content">
<div class="message-box__container">
模态框内容区域
</div>
</div>
<div class="message-box__btns">
<button type="button" class="box-button" id="btnCancel">取消</button>
<button type="button" class="box-button button--primary" id="btnSure">确定</button>
</div>
</div>
</div>
<div class="dialog-fade"></div>
</body>
<script>
const btns = document.querySelector('#btn');
const btnCancel = document.querySelector('#btnCancel');
const btnSure = document.querySelector('#btnSure');
const dialogWrap = document.querySelector('.dialog-wrap');
const modalWrap = document.querySelector('.dialog-fade');
btns.addEventListener('click', () => {
document.body.style="overflow:hidden"; // 去掉父级滚动条
document.body.appendChild(dialogWrap);
document.body.appendChild(modalWrap);
modalWrap.style="display: block"
dialogWrap.style="display: block"
});
btnCancel.addEventListener('click', () => {
document.body.removeChild(dialogWrap);
document.body.removeChild(modalWrap);
});
btnSure.addEventListener('click', () => {
document.body.removeChild(dialogWrap);
document.body.removeChild(modalWrap);
});
</script>
</html>
简单dialog-demo
- 向body中插入节点时，将body的样式去除滚动条
- 设置背景区域 dialog-fade 设置层级 z-index
- 模态框背景区域不可操作，用 dialog-wrap 包裹一层 设置层级 z-index 要比 dialog-fade 层级高！
- 确定 / 取消 事件从body中remove节点
指定区域dialog-demo
待续。。。
可拖拽dialo-demo
待续。。。
