關于自制網頁簡易點擊彈窗效果

時瀏覽網站的時候經常會遇到點擊某些按鈕會彈出登錄提示或者注意事項提示的彈窗。那么這種彈窗是怎么實現的呢。實現方法有很多，不外乎就是點擊事件觸發相應的彈窗事件。
在這里介紹一個簡易實現的方法。
首先，這里的彈窗長這樣：

而原本頁面長這樣：

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

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;
}
由于在整個彈窗的父級div里加了隱藏屬性：display:none; 所以在頁面上是看不到彈窗的，這個時候就要開始寫觸發彈窗的點擊事件了，上面假定的按鈕是btn1，彈窗這塊的父級div是 tc 。
<script>
$('.btn1').on('click',function(){
$('.tc').show();
})
</script>
這樣就寫好之后點擊 btn1 就能顯示彈窗了，現在彈窗出現的效果有了，那么點擊close關閉彈窗的效果也就不遠了
<script>
$('.tc .btn2').on('click',function(){
$('.tc').hide();
})
</script>
在這里把close 的類名命名為 btn2，如上代碼就實現了點擊close按鈕關閉彈窗的功能。
將這兩個事件放在一起，節省一個script，也顯得美觀些就是這樣
<script>
$('.btn1').on('click',function(){
$('.tc').show();
})
$('.tc .btn2').on('click',function(){
$('.tc').hide();
})
</script>
到這里一個建議的點擊彈窗關閉的效果就實現了。

方的冬天最怕有風，空氣雖然好了，但是異常的冷，吸幾口冷風感覺肺都結了冰。一大早小白來到辦公室琢磨用戶交互方面的問題，看了幾個網站發現很多網站的彈窗都是自定義的，而且還把彈窗周圍的區域做成了半透明狀，看上去非常不錯。于是小白也準備自己通過css布局一個彈窗試試，一來以后肯定會用上這個功能，二來熟悉一下最近掌握的CSS+HTML布局。

說干就干，小白打開webStrom做起了彈窗的布局。他首先用一個容器layer作為彈窗的容器，然后里面放了窗口容器（dialog），窗口容器里面還包含了三個子容器，分別是標題（layerTitle）、內容區域（layerContent）、按鈕區域（layerBTContainer）。

小白想：“layer要充滿并遮擋整個瀏覽器窗口，而且滾動頁面它還得一直保持遮擋的狀態，把它設置為浮動類型（position:fixed）的容器最合適。里面的dialog需要保持在瀏覽器的最中心位置，因此最好把dialog設置成固定寬度和高度，這樣可以很好的實現居中。”，于是小白先把layer和dialog以及dialog內部的容器設定了一個初步的CSS樣式。

layer的position設置為fixed，上下左右距離都設置成0，就可以達到占用整個窗口。里面的dialog容器小白根據剛學習的CSS溢出法讓dialog上下都居中。dialog如果是絕對定位，設置上下左右距離都為0它會占用整個父容器區域，但是如果CSS中限制了dialog的寬和高并且設置了marin為auto，它就會基于父容器居中。

為了測試transition屬性，小白還把確定按鈕上面設置了一個鼠標移上去以后漸變的效果，做完以后就是這個樣子：

看到布局好的彈窗小白心里非常高興，突然他想到一個問題，這個彈窗背景還沒設置半透明，于是趕緊往layer上增加了opacity:0.5這個半透明屬性，小白滿懷信息的刷新了頁面，當看到結果時小白發現背景和窗口都變成了半透明。

正好這時老朱從小白身邊經過，隨口跟小白說了一句：“小白，你是不是把窗口的父容器設置成半透明了？”

“是啊！父容器背景是黑色，所以我把父容器設置成了半透明！”

“可是父容器設置半透明會對他的子元素產生影響啊，這樣會導致它里面的所有元素都變成半透明，你為啥不給窗口添加一個兄弟容器來實現這個效果呢？”

小白仔細想了想，說道：“哦！我明白了，我可以在layer容器里面放一個跟layer一樣大的容器，這樣就不會沖突了，我再試試！”

不一會小白找到老朱，說道：“我改好了，現在我給dialog添加了一個layerbg容器作為背景層，然后把layer之前的背景色和透明度去掉，放到了新增加的背景層上面，背景層高和寬與layer一樣所以這樣就不會把dialog也變成半透明了。你看看效果。”

老朱說：“嗯！不錯，你現在通過HTML和CSS布局的這個彈窗還能做很多完善，比如出現彈窗時增加一個動畫效果、給它添加一個關閉按鈕或者取消按鈕等等。除了提示功能以外，你現在做的這個還能再進行深入修改，把它變成可以輸入文字的prompt框，點擊確定以后可以對頁面或者數據庫數據進行修改。”

想學H5的朋友可以關注老爐，您的關注是我持續更新《小白HTML5成長之路》的動力！

opover API 為開發者提供了一種聲明式的方式來創建各種類型的彈窗。目前已在所有三大瀏覽器引擎中可用，并正式成為 Baseline 2024 的一部分。

一直以來，我們在實現彈出式菜單、提示框或信息卡片時，往往依賴于各種 JavaScript 庫或者自定義 CSS 樣式來完成。雖然這些方法有效，但它們通常伴隨著代碼冗余、兼容性問題。Popover API 正是為了簡化這一過程而生，它為 Web開發者提供了一套標準化的方法來創建和控制彈出窗口，確保了跨瀏覽器的一致性和易用性。

Popover API 彈窗的一些特點如下：

彈窗將出現在頁面的最頂層，無需您調整 z-index。
點擊彈窗區域外部將關閉彈出窗口并返回焦點。
打開彈窗后，下一個制表符停止位置將位于彈窗內部。
按下 Esc 鍵或雙擊切換將關閉彈窗并返回焦點。
將彈窗元素與彈窗觸發器進行語義上的連接。

使用 Popover API 創建一個最基礎的彈窗非常簡單，只需要一個button 按鈕用于觸發彈窗，和一個彈窗 div 元素。

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

實現代碼如下：

<button popovertarget="my-popover">打開彈窗</button>

<div id="my-popover" popover>
  <p>我是一個包含一些信息的彈窗。 按下 <kbd>Esc</kbd> 鍵或點擊彈窗外部將我關閉<p>
</div>

此時一個最簡單的點擊按鈕顯示彈窗功能就實現了。

演示效果如下：

通過 popover 屬性制作彈窗，基礎版 - 在線演示 https://bi.cool/bi/0b6c78K

其中屬性 popover 如果不賦值，則等同于 popover="auto"。auto值表示啟用點擊彈窗外部則自動關閉彈窗。

如果設置popover="manual"，則點擊彈窗外部不會再自動關閉彈窗，此時你將需要自定義關閉按鈕來觸發彈窗的關閉。

例如：

<button popovertarget="my-popover" class="trigger-btn">打開彈窗</button>

<div id="my-popover" popover=manual>
  <p>我是一個包含一些信息的彈窗。按下?按鈕即可將我關閉<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">?</span>
  </button>
</div>

演示效果如下：

通過 popover 屬性制作彈窗，自定義關閉按鈕 - 在線演示 https://bi.cool/bi/5Bkfd32?

此時，你會看到點擊彈窗外部不會再自動關閉彈窗，點擊自定義的關閉按鈕才會關閉彈窗。

在線咨詢

上一篇：知識記憶工具：Anki for Mac中文免費版
下一篇：把WORD中包含的圖片粘貼到網頁上時，為啥就丟失圖片了呢？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

關于自制網頁簡易點擊彈窗效果

您的項目需求