Discuz!教程：怎么增加点击链接弹出提示窗口？

最近想在网站某个地方加个弹窗功能，网上找了教程，自己又改了一下，分享记录一下。

弹窗功能由三个部分组成，DIV层，CSS样式以及JS部分。

[CSS] 纯文本查看 复制代码

<style>
    /*阅读链接弹窗样式*/
   /* 弹窗 (background) */
.modal {
    display: none; /* 默认隐藏 */
    position: fixed; /* 固定定位 */
    z-index: 1; /* 设置在顶层 */
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
}
 
/* 弹窗内容 */
.modal-content {
    background-color: #FEFEE9;
    margin: 18% auto; 
    padding: 20px;
    border: 1px solid #B1B1B1;
    width: 470px;
    height: 270px;
   border-radius: 15px;
}
.modal-content p{color: #333;padding:30px 0;}
 .modal-content h3{font-weight: bold;text-align: center;font-size: 30px;color: #333;}
/* 关闭按钮 */
.close {
    color: #fff;
    float: right;
    font-size: 20px;
    font-weight: bold;
    margin: -10px 124px 0 0;
    padding: 5px 60px;
    background-color: #00a4ff;
    border-radius: 22px;
    
}
 
.close:hover,
.close:focus {
    /*color: black;*/
    text-decoration: none;
    cursor: pointer;
}

/*立即阅读*/
    #myBtn {background: #567ceb !important;border: 0px solid #567ceb;}
</style>

[HTML] 纯文本查看 复制代码

<!-- 阅读链接未登录弹窗 -->
<button id="myBtn">立即阅读</button>
<!-- 弹窗 -->
<div id="myModal" class="modal">
 
  <!-- 弹窗内容 -->
  <div class="modal-content">
    
    <h3>弹出层标题</h3>
<p>弹出层内容<br>
弹出层内容<br>

弹出层内容<br>

</p>
    <span class="close">我知道了</span>
  </div>
 
</div>

[JavaScript] 纯文本查看 复制代码

<script  type="text/javascript">
    // 获取弹窗
var modal = document.getElementById('myModal');
 
// 打开弹窗的按钮对象
var btn = document.getElementById("myBtn");
 
// 获取 <span> 元素，用于关闭弹窗
var span = document.querySelector('.close');
 
// 点击按钮打开弹窗
btn.onclick = function() {
    modal.style.display = "block";
}
 
// 点击 <span> (x), 关闭弹窗
span.onclick = function() {
    modal.style.display = "none";
}
 
// 在用户点击其他地方时，关闭弹窗
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
    </script>

友情提示：建议将CSS放在DIV上面，不然可能进入的瞬间会出现DIV比样式最先加载的情况，造成短暂样式错位的情况。