整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

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

          時(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)了。

          方的冬天最怕有風(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)如下:

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


          主站蜘蛛池模板: 亚洲一区二区三区免费观看| 国产麻豆精品一区二区三区| 亚洲中文字幕无码一区二区三区 | 激情内射亚洲一区二区三区| 国产自产V一区二区三区C| 手机看片福利一区二区三区| 99精品一区二区三区| 影院成人区精品一区二区婷婷丽春院影视| 怡红院美国分院一区二区| 国产精品污WWW一区二区三区 | 日本精品少妇一区二区三区| 好爽毛片一区二区三区四| 精品一区二区三区东京热| 日韩在线不卡免费视频一区| 国产精品视频一区| 色妞AV永久一区二区国产AV| 国产91大片精品一区在线观看| 视频一区二区在线播放| 久久久国产精品一区二区18禁| 成人在线观看一区| 国产精品无码AV一区二区三区 | 久久久国产一区二区三区| 亚洲国产激情在线一区| 国产成人高清视频一区二区| 精品三级AV无码一区| 精品国产一区二区22| 精品一区二区ww| 国产精品亚洲一区二区三区在线| 亚洲精品伦理熟女国产一区二区| 中文字幕久久久久一区| 在线精品一区二区三区电影| 亚洲国产精品一区| 亚洲午夜日韩高清一区| 国产成人午夜精品一区二区三区| 日韩欧国产精品一区综合无码| 精品在线视频一区| 国模视频一区二区| 国产精品夜色一区二区三区 | 高清国产精品人妻一区二区| 免费在线视频一区| 无码人妻品一区二区三区精99 |