關(guān)于自制網(wǎng)頁簡易點(diǎn)擊彈窗效果

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

　　在這里介紹一個簡易實現(xiàn)的方法。

　　首先，這里的彈窗長這樣：

　　而原本頁面長這樣：

　　這里假定圖中深綠色的按鈕作為觸發(fā)彈窗事件的按鈕，在這里命名為btn1，然后就是彈窗的制作：

　　由圖可看出，彈窗是基于整個屏幕的，有個灰色背景遮罩，中間有一塊白色底帶有圖標(biāo)文字說明的內(nèi)容提示區(qū)，下面還有兩個按鈕，close是關(guān)閉彈窗的作用。了解了這些，就開始制作彈窗了：

　　1、html結(jié)構(gòu)如下：

1. css樣式如下：

　　width：100%;

　　height：100%;

　　position：fixed;

　　top：0;

　　z-index：9;

　　background：rgba(0，0，0，.5);

　　display：none;

　　}

　　.tc.box{

　　width：670px;

　　height：404px;

　　background：#fff;

　　position：absolute;

　　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;

　　color：#333;

　　text-align：center;

　　box-sizing：border-box;

　　padding：070px;

　　margin-top：38px;

　　}

　　.tc.box.t2{

　　display：flex;

　　justify-content：center;

　　margin-top：48px;

　　}

　　.tc.box.t

　　2.btn1{

　　width：195px;

　　height：40px;

　　border：none;

　　background：#1296db;

　　color：#fff;

　　font-size：18px;

　　display：block;

　　cursor：pointer;

　　}

　　.tc.box.t

　　2.btn2{

　　width：128px;

　　height：40px;

　　border：none;

　　background：#295965;

　　color：#fff;

　　font-size：18px;

　　display：block;

　　margin-left：16px;

　　cursor：pointer;

　　}

　　由于在整個彈窗的父級p里加了隱藏屬性：display：none;所以在頁面上是看不到彈窗的，這個時候就要開始寫觸發(fā)彈窗的點(diǎn)擊事件了，上面假定的按鈕是btn1，彈窗這塊的父級p是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，如上代碼就實現(xiàn)了點(diǎn)擊close按鈕關(guān)閉彈窗的功能。

　　將這兩個事件放在一起，節(jié)省一個script，也顯得美觀些就是這樣

　　script

　　$('.btn1').on('click'，function(){

　　$('.tc').show();

　　})

　　$('.tc.btn2').on('click'，function(){

　　$('.tc').hide();

　　})

　　/script

　　到這里一個建議的點(diǎn)擊彈窗關(guān)閉的效果就實現(xiàn)了。