一个简单的页面弹窗,复制进页面就可以用,省得老是重新写样式
Html代码
<div class="web_notice" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(103, 101, 101, 0.31); z-index: 99999;">
<div style="position: fixed; top: 50%; left: 50%; width: 320px; background: #FFF; transform: translate(-50%, -50%); border-radius: 40px; padding: 50px 40px;">
<button style="position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 20px; cursor: pointer;color:red;" onclick="closePopup();">×</button>
<h3 style="font-weight: bold; text-align: center; font-size: 30px;">Title</h3>
<div style="font-size: 16px; margin-top: 26px; line-height: 30px; color: #999;word-wrap: break-word;">
this is content
<p><a href="http://www.xfol.cc" target="_blank" style="display: block; text-align: center; font-weight: bold; font-size: 19px; line-height: 60px; margin: 0 auto; margin-top: 45px; border-radius: 32px; width: 80%;" onclick="redirectUrlToActive();" rel='nofollow'>JumpLink</a></p>
</div>
</div>
</div>
Js代码
function closePopup() {
document.querySelector('.web_notice').style.display = 'none';
}