平時(shí)瀏覽網(wǎng)站的時(shí)候經(jīng)常會遇到點(diǎn)擊某些按鈕會彈出登錄提示或者注意事項(xiàng)提示的彈窗。那么這種彈窗是怎么實(shí)現(xiàn)的呢。實(shí)現(xiàn)方法有很多，不外乎就是點(diǎn)擊事件觸發(fā)相應(yīng)的彈窗事件。
在這里介紹一個(gè)簡易實(shí)現(xiàn)的方法。
 
首先，這里的彈窗長這樣：
 

而原本頁面長這樣：
 

這里假定圖中深綠色的按鈕作為觸發(fā)彈窗事件的按鈕，在這里命名為btn1，然后就是彈窗的制作：
由圖可看出，彈窗是基于整個(gè)屏幕的，有個(gè)灰色背景遮罩，中間有一塊白色底帶有圖標(biāo)文字說明的內(nèi)容提示區(qū)，下面還有兩個(gè)按鈕，close是關(guān)閉彈窗的作用。了解了這些，就開始制作彈窗了：
1、html結(jié)構(gòu)如下：
 

 

1. css樣式如下：

.tc{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9;
    background: rgba(0,0,0,.5);
    display: none;
}
.tc .box{
    width: 670px;
    height: 404px;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    box-sizing: border-box;
    padding-top: 54px;
}
.tc .box .icon{
    width: 110px;
    height: 110px;
    margin: auto;
}
.tc .box .t1{
    font-size: 18px;
    line-height: 28px;
    color: #333;
    text-align: center;
    box-sizing: border-box;
    padding: 0 70px;
    margin-top: 38px;
}
.tc .box .t2{
    display: flex;
    justify-content: center;
    margin-top: 48px;
}
.tc .box .t2 .btn1{
    width: 195px;
    height: 40px;
    border: none;
    background: #1296db;
    color: #fff;
    font-size: 18px;
    display: block;
    cursor: pointer;
}
.tc .box .t2 .btn2{
    width: 128px;
    height: 40px;
    border: none;
    background: #295965;
    color: #fff;
    font-size: 18px;
    display: block;
    margin-left: 16px;
    cursor: pointer;
}
 
 
由于在整個(gè)彈窗的父級div里加了隱藏屬性：display:none; 所以在頁面上是看不到彈窗的，這個(gè)時(shí)候就要開始寫觸發(fā)彈窗的點(diǎn)擊事件了，上面假定的按鈕是btn1，彈窗這塊的父級div是 tc 。
<script>
        $('.btn1').on('click',function(){
            $('.tc').show();
        })
    </script>
 
這樣就寫好之后點(diǎn)擊 btn1 就能顯示彈窗了，現(xiàn)在彈窗出現(xiàn)的效果有了，那么點(diǎn)擊close關(guān)閉彈窗的效果也就不遠(yuǎn)了
<script>
        $('.tc .btn2').on('click',function(){
            $('.tc').hide();
        })
    </script>
在這里把close 的類名命名為 btn2， 如上代碼就實(shí)現(xiàn)了點(diǎn)擊close按鈕關(guān)閉彈窗的功能。
將這兩個(gè)事件放在一起，節(jié)省一個(gè)script，也顯得美觀些就是這樣
<script>
        $('.btn1').on('click',function(){
            $('.tc').show();
        })
        $('.tc .btn2').on('click',function(){
            $('.tc').hide();
        })
    </script>
 
到這里一個(gè)建議的點(diǎn)擊彈窗關(guān)閉的效果就實(shí)現(xiàn)了。