一个简单的页面弹窗,复制进页面就可以用,省得老是重新写样式

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';
  }

By 雪峰

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注