js点击弹窗高效沟通前必看弹出层方法

上期我们分享了 “ 网站首页每天自动弹窗一次通知公告教程 ” 今天再来分享一篇，点击弹窗弹出层的方式，这里我是做成了 “ 高效沟通前必看 ” 会话通知，当然点击内容可随意修改的哈。

js

var btn = document.getElementById('showModel');
var close = document.getElementsByClassName('close')[0];
var cancel = document.getElementById('cancel');
btn.addEventListener('click', function() {
    modal.style.display = "block";
});
close.addEventListener('click', function() {
    modal.style.display = "none";
});
cancel.addEventListener('click', function() {
    modal.style.display = "none";
});

html

<button type="button" id="showModel">点击显示</button>
<div id="modal" class="modal">
    <div class="modal-content">
        <header class="modal-header">
            <h4>高效沟通前必看！</h4>
            <div class="close">x</div>
        </header>
        <div class="modal-body">
<div style="font-size:15px;line-height:30px">
1. 本站购买的就是优惠价，满1000元再打9折，勿问是否有优惠<br>
2. 咨询请先说明是哪个应用<br>
3. <span style="color:red">首次售后咨询请主动添加好友并说明购买的应用名、购买点、订单号</span><br>
4. 开场不要只发“你好”、“在吗”之类的话，否则不回复<br>
5. 请尽量一句表述完你的问题
<br>
<span style="font-size:13px;color:#999;line-height:0px"> 
因腾讯问题，有时QQ咨询发送的消息并不是100%送达，如未回复，请再次发送！如无法发起QQ会话，请手动添加QQ 394817050
</span>
</div>
        </div>
        <footer class="modal-footer">
            <button id="sure">
<a href="http://wpa.qq.com/msgrd?v=3&uin=394817050&site=qq&menu=yes" target="_blank">发起QQ会话</a>
</button>
            <button id="cancel">取消</button>
        </footer>
    </div>
</div>

css

h4 {
margin-left:10px;
color:white;
color: #666;
margin-block-start: 0em;
margin-block-end: 0em;
line-height: 35px;
}
p {
text-align:center;
}
.btn {
width:100px;
height:35px;
border-radius:5px;
font-size:16px;
color:white;
background-color:cornflowerblue;
}
.btn:hover,.btn:focus {
background-color:#95b4ed;
}
.modal {
display:none;
width:100%;
height:100%;
position:fixed;
left:0;
top:0;
z-index:1000;
background-color:rgba(0,0,0,0.5);
}
.modal-content {
display:flex;
flex-flow:column nowrap;
justify-content:space-between;
width:50%;
max-width:510px;
height:auto;
max-height:500px;
margin:100px auto;
border-radius:4px;
background-color:#fff;
-webkit-animation:zoom 0.6s;
animation:zoom 0.6s;
resize:both;
overflow:auto;
}
@-webkit-keyframes zoom {
from {
-webkit-transform:scale(0)
}
to {
-webkit-transform:scale(1)
}
}@keyframes zoom {
from {
transform:scale(0)
}
to {
transform:scale(1)
}
}.modal-header {
box-sizing:border-box;
background-color: #f9f9f9;
display:flex;
justify-content:space-between;
align-items:center;
font-size: 14px;
border-bottom: solid 1px #eee;
}
.close {
color:#b7b7b7;
font-size: 20px;
font-weight:bold;
margin-right:20px;
transition:all 0.3s;
}
.close:hover,.close:focus {
color:#95b4ed;
text-decoration:none;
cursor:pointer;
}
.modal-body {
padding:10px;
font-size:16px;
box-sizing:border-box;
height:auto;
    color: #666;
}
.modal-footer {
box-sizing:border-box;
border-top:1px solid #ccc;
display:flex;
justify-content:flex-end;
align-items:center;
border-top: solid 1px #eee;
padding: 4px 4px 4px 4px;
background-color: #f9f9f9;
}
#sure {
padding:5px;
box-sizing:border-box;
margin-right:10px;
font-size: 14px;
color:white;
border-radius: 4px;
background-color: #2c74e6;
padding: 4px 10px;
border-width: 0px;
}
#sure a{
color:white;
text-decoration:none;
}
#cancel {
padding:5px;
box-sizing:border-box;
margin-right:10px;
color: #444;
border-radius: 3px;
background-color: #dcdcdc;
padding: 4px 10px;
border: solid 1px #d0d0d0;
opacity: .9;
}
.modal-footer button:hover,.modal-footer button:focus {
background-color:#95b4ed;
cursor:pointer;
}
@media only screen and (max-width:700px) {
.modal-content {
width:80%;
}
}