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

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è)彈窗的父級(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)了。

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

1. 彈窗將出現(xiàn)在頁(yè)面的最頂層，無(wú)需您調(diào)整 z-index。
2. 點(diǎn)擊彈窗區(qū)域外部將關(guān)閉彈出窗口并返回焦點(diǎn)。
3. 打開彈窗后，下一個(gè)制表符停止位置將位于彈窗內(nèi)部。
4. 按下 Esc 鍵或雙擊切換將關(guān)閉彈窗并返回焦點(diǎn)。
5. 將彈窗元素與彈窗觸發(fā)器進(jìn)行語(yǔ)義上的連接。

使用 Popover API 創(chuàng)建一個(gè)最基礎(chǔ)的彈窗非常簡(jiǎn)單，只需要一個(gè)button 按鈕用于觸發(fā)彈窗，和一個(gè)彈窗 div 元素。

• 首先，給彈窗 div 元素添加 popover 屬性，并給它設(shè)置一個(gè)唯一 id。
• 然后，在給按鈕的添加 popovertarget 屬性，值設(shè)置為彈窗的 id。

實(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)閉彈窗。