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

平時(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)如下：

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:070px;
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>

當(dāng)前文章：關(guān)于自制網(wǎng)頁簡易點(diǎn)擊彈窗效果
當(dāng)前網(wǎng)址：http://www.bm7419.com/news4/236004.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、云服務(wù)器、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、小程序開發(fā)、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)