時(shí)瀏覽網(wǎng)站的時(shí)候經(jīng)常會(huì)遇到點(diǎn)擊某些按鈕會(huì)彈出登錄提示或者注意事項(xiàng)提示的彈窗。那么這種彈窗是怎么實(shí)現(xiàn)的呢。實(shí)現(xiàn)方法有很多,不外乎就是點(diǎn)擊事件觸發(fā)相應(yīng)的彈窗事件。
在這里介紹一個(gè)簡(jiǎn)易實(shí)現(xiàn)的方法。
首先,這里的彈窗長(zhǎng)這樣:
而原本頁(yè)面長(zhǎng)這樣:
這里假定圖中深綠色的按鈕作為觸發(fā)彈窗事件的按鈕,在這里命名為btn1,然后就是彈窗的制作:
由圖可看出,彈窗是基于整個(gè)屏幕的,有個(gè)灰色背景遮罩,中間有一塊白色底帶有圖標(biāo)文字說(shuō)明的內(nèi)容提示區(qū),下面還有兩個(gè)按鈕,close是關(guān)閉彈窗的作用。了解了這些,就開始制作彈窗了:
1、html結(jié)構(gòu)如下:
.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è)彈窗的父級(jí)div里加了隱藏屬性:display:none; 所以在頁(yè)面上是看不到彈窗的,這個(gè)時(shí)候就要開始寫觸發(fā)彈窗的點(diǎn)擊事件了,上面假定的按鈕是btn1,彈窗這塊的父級(jí)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)了。
方的冬天最怕有風(fēng),空氣雖然好了,但是異常的冷,吸幾口冷風(fēng)感覺(jué)肺都結(jié)了冰。一大早小白來(lái)到辦公室琢磨用戶交互方面的問(wèn)題,看了幾個(gè)網(wǎng)站發(fā)現(xiàn)很多網(wǎng)站的彈窗都是自定義的,而且還把彈窗周圍的區(qū)域做成了半透明狀,看上去非常不錯(cuò)。于是小白也準(zhǔn)備自己通過(guò)css布局一個(gè)彈窗試試,一來(lái)以后肯定會(huì)用上這個(gè)功能,二來(lái)熟悉一下最近掌握的CSS+HTML布局。
說(shuō)干就干,小白打開webStrom做起了彈窗的布局。他首先用一個(gè)容器layer作為彈窗的容器,然后里面放了窗口容器(dialog),窗口容器里面還包含了三個(gè)子容器,分別是標(biāo)題(layerTitle)、內(nèi)容區(qū)域(layerContent)、按鈕區(qū)域(layerBTContainer)。
小白想:“l(fā)ayer要充滿并遮擋整個(gè)瀏覽器窗口,而且滾動(dòng)頁(yè)面它還得一直保持遮擋的狀態(tài),把它設(shè)置為浮動(dòng)類型(position:fixed)的容器最合適。里面的dialog需要保持在瀏覽器的最中心位置,因此最好把dialog設(shè)置成固定寬度和高度,這樣可以很好的實(shí)現(xiàn)居中。”,于是小白先把layer和dialog以及dialog內(nèi)部的容器設(shè)定了一個(gè)初步的CSS樣式。
layer的position設(shè)置為fixed,上下左右距離都設(shè)置成0,就可以達(dá)到占用整個(gè)窗口。里面的dialog容器小白根據(jù)剛學(xué)習(xí)的CSS溢出法讓dialog上下都居中。dialog如果是絕對(duì)定位,設(shè)置上下左右距離都為0它會(huì)占用整個(gè)父容器區(qū)域,但是如果CSS中限制了dialog的寬和高并且設(shè)置了marin為auto,它就會(huì)基于父容器居中。
為了測(cè)試transition屬性,小白還把確定按鈕上面設(shè)置了一個(gè)鼠標(biāo)移上去以后漸變的效果,做完以后就是這個(gè)樣子:
看到布局好的彈窗小白心里非常高興,突然他想到一個(gè)問(wèn)題,這個(gè)彈窗背景還沒(méi)設(shè)置半透明,于是趕緊往layer上增加了opacity:0.5這個(gè)半透明屬性,小白滿懷信息的刷新了頁(yè)面,當(dāng)看到結(jié)果時(shí)小白發(fā)現(xiàn)背景和窗口都變成了半透明。
正好這時(shí)老朱從小白身邊經(jīng)過(guò),隨口跟小白說(shuō)了一句:“小白,你是不是把窗口的父容器設(shè)置成半透明了?”
“是啊!父容器背景是黑色,所以我把父容器設(shè)置成了半透明!”
“可是父容器設(shè)置半透明會(huì)對(duì)他的子元素產(chǎn)生影響啊,這樣會(huì)導(dǎo)致它里面的所有元素都變成半透明,你為啥不給窗口添加一個(gè)兄弟容器來(lái)實(shí)現(xiàn)這個(gè)效果呢?”
小白仔細(xì)想了想,說(shuō)道:“哦!我明白了,我可以在layer容器里面放一個(gè)跟layer一樣大的容器,這樣就不會(huì)沖突了,我再試試!”
不一會(huì)小白找到老朱,說(shuō)道:“我改好了,現(xiàn)在我給dialog添加了一個(gè)layerbg容器作為背景層,然后把layer之前的背景色和透明度去掉,放到了新增加的背景層上面,背景層高和寬與layer一樣所以這樣就不會(huì)把dialog也變成半透明了。你看看效果。”
老朱說(shuō):“嗯!不錯(cuò),你現(xiàn)在通過(guò)HTML和CSS布局的這個(gè)彈窗還能做很多完善,比如出現(xiàn)彈窗時(shí)增加一個(gè)動(dòng)畫效果、給它添加一個(gè)關(guān)閉按鈕或者取消按鈕等等。除了提示功能以外,你現(xiàn)在做的這個(gè)還能再進(jìn)行深入修改,把它變成可以輸入文字的prompt框,點(diǎn)擊確定以后可以對(duì)頁(yè)面或者數(shù)據(jù)庫(kù)數(shù)據(jù)進(jìn)行修改。”
想學(xué)H5的朋友可以關(guān)注老爐,您的關(guān)注是我持續(xù)更新《小白HTML5成長(zhǎng)之路》的動(dòng)力!
opover API 為開發(fā)者提供了一種聲明式的方式來(lái)創(chuàng)建各種類型的彈窗。目前已在所有三大瀏覽器引擎中可用,并正式成為 Baseline 2024 的一部分。
一直以來(lái),我們?cè)趯?shí)現(xiàn)彈出式菜單、提示框或信息卡片時(shí),往往依賴于各種 JavaScript 庫(kù)或者自定義 CSS 樣式來(lái)完成。雖然這些方法有效,但它們通常伴隨著代碼冗余、兼容性問(wèn)題。Popover API 正是為了簡(jiǎn)化這一過(guò)程而生,它為 Web開發(fā)者提供了一套標(biāo)準(zhǔn)化的方法來(lái)創(chuàng)建和控制彈出窗口,確保了跨瀏覽器的一致性和易用性。
Popover API 彈窗的一些特點(diǎn)如下:
使用 Popover API 創(chuàng)建一個(gè)最基礎(chǔ)的彈窗非常簡(jiǎn)單,只需要一個(gè)button 按鈕用于觸發(fā)彈窗,和一個(gè)彈窗 div 元素。
實(shí)現(xiàn)代碼如下:
<button popovertarget="my-popover">打開彈窗</button>
<div id="my-popover" popover>
<p>我是一個(gè)包含一些信息的彈窗。 按下 <kbd>Esc</kbd> 鍵或點(diǎn)擊彈窗外部將我關(guān)閉<p>
</div>
此時(shí)一個(gè)最簡(jiǎn)單的點(diǎn)擊按鈕顯示彈窗功能就實(shí)現(xiàn)了。
演示效果如下:
通過(guò) popover 屬性制作彈窗,基礎(chǔ)版 - 在線演示 https://bi.cool/bi/0b6c78K
其中屬性 popover 如果不賦值,則等同于 popover="auto"。auto值表示啟用點(diǎn)擊彈窗外部則自動(dòng)關(guān)閉彈窗。
如果設(shè)置popover="manual",則點(diǎn)擊彈窗外部不會(huì)再自動(dòng)關(guān)閉彈窗,此時(shí)你將需要自定義關(guān)閉按鈕來(lái)觸發(fā)彈窗的關(guān)閉。
例如:
<button popovertarget="my-popover" class="trigger-btn">打開彈窗</button>
<div id="my-popover" popover=manual>
<p>我是一個(gè)包含一些信息的彈窗。按下?按鈕即可將我關(guān)閉<p>
<button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
<span aria-hidden="true">?</span>
</button>
</div>
演示效果如下:
通過(guò) popover 屬性制作彈窗,自定義關(guān)閉按鈕 - 在線演示 https://bi.cool/bi/5Bkfd32?
此時(shí),你會(huì)看到點(diǎn)擊彈窗外部不會(huì)再自動(dòng)關(guān)閉彈窗,點(diǎn)擊自定義的關(guān)閉按鈕才會(huì)關(guān)閉彈窗。
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。