<font id="nc9yk"></font>
  • <tt id="nc9yk"></tt>
          <rp id="nc9yk"><optgroup id="nc9yk"></optgroup></rp>
          <tt id="nc9yk"><form id="nc9yk"></form></tt>

            <cite id="nc9yk"></cite>

            css實現彈窗上下左右居中且背景透明鎖定窗口效果

              發布時間:2020-12-23 14:38:52   作者:捕魚農民   我要評論
            這篇文章主要介紹了css實現彈窗上下左右居中且背景透明鎖定窗口效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

            有一種簡單的css方法實現點擊之后的彈出框上下左右居中且附加灰色透明遮罩鎖定窗口清除滾動條

            在這里插入圖片描述

            html代碼

            <div class="box">
            	<div class="boxs">
            	    <!-- 白色彈窗 -->
            	</div>
            </div>

            css代碼

            html, body {
                 width: 100%;
                 height: 100%;
             }
             .box {
                 display: none;
                 width: 100%;
                 height: 100%;
                 position: fixed;
                 left:0;
                 top:0;
                 background-color:rgba(0,0,0,0.5);
             }
             .boxs {
                 width: 400px;
                 height: 300px;
                 background: #fff;
                 box-shadow: 1px 7px 18px 0px rgba(84, 115, 128, 0.11);
                 border-radius: 4px;
                 cursor: pointer;
                 position: absolute;
                 left: 50%;
                 top: 50%;
                 margin-top: -150px;
                 margin-left: -200px;
             }

            使用position:fixed固定透明背景元素,可以有效鎖定窗口防止滾動條滾動,且可以利用定位在父元素內部實現子元素上下左右居中。至于彈出操作只需把點擊事件和外層div的display屬性的none以及block聯動起來即可。

            到此這篇關于css實現彈窗上下左右居中且背景透明鎖定窗口的文章就介紹到這了,更多相關css彈窗居中背景透明鎖定窗口內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

            相關文章

            • CSS仿蘋果平滑開關按鈕效果

              這篇文章主要介紹了CSS仿蘋果平滑開關按鈕效果,本文通過實例代碼給大家介紹的非常想詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
              2020-12-25
            • css實現彈窗上下左右居中且背景透明鎖定窗口效果

              這篇文章主要介紹了css實現彈窗上下左右居中且背景透明鎖定窗口效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參
              2020-12-23
            • css 利用 position + margin 實現固定盒子橫向縱向居中的方法

              這篇文章主要介紹了css 利用 position + margin 實現固定盒子橫向縱向居中的方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要
              2020-12-23
            • CSS 鼠標懸浮在圖片上添加遮罩層效果的實現

              這篇文章主要介紹了CSS 鼠標懸浮在圖片上添加遮罩層效果的實現,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
              2020-12-17
            • 總結下常用的nth-child選擇符

              這篇文章主要介紹了總結下常用的nth-child選擇符,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學
              2020-12-11
            • CSS3簡易切割輪播圖的實現代碼

              這篇文章主要介紹了CSS3簡易切割輪播圖的實現代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學
              2020-12-09
            • table表格使用:nth-child()實現隔行變色與對齊

              在html中,使用table表格展示數據是一種非常方面的途徑,有的時候我們希望表格內的數據實現不同的對齊方式,以便符合閱讀的習慣,比如日期列居左,數字通常居右對齊
              2020-12-08
            • CSS實現背景圖片屏幕自適應的實現

              這篇文章主要介紹了CSS實現背景圖片屏幕自適應的實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學
              2020-12-07
            • CSS實現小圖下拉查看大圖和信息的方法

              這篇文章主要介紹了CSS實現小圖下拉查看大圖和信息的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一
              2020-12-07
            • 純CSS實現的下拉菜單

              這篇文章主要介紹了純CSS實現的下拉菜單的示例代碼,幫助大家更好的理解和使用CSS特效,感興趣的朋友可以了解下
              2020-12-07

            最新評論

            hao500彩票 www.xijiufuheban.com:潍坊市| www.dressupchic.com:宁武县| www.huizhicz.com:福贡县| www.mjknetworks.com:香格里拉县| www.duhocnamhai.com:南涧| www.982610.com:麻栗坡县| www.champaignilmls.com:原平市| www.274252.com:正安县| www.assurancecarolefortin.com:梧州市| www.nettensatis.com:富顺县| www.uniahes.com:读书| www.company-in-china.com:永福县| www.popitaragones.com:辽源市| www.tjdongtai.com:榕江县| www.everyounggroup.com:泊头市| www.jljxg.cn:四平市| www.netcnz.com:云梦县| www.yumaoziyuan.com:渭源县| www.mugua668.com:迭部县| www.telepoisson.com:宜君县| www.sxzyfsh.com:恭城| www.monterockcorp.com:西贡区| www.vuaxedien.com:名山县| www.kn599.com:新干县| www.chenxuan88.com:古交市| www.adonis-danieletto.com:栾城县| www.ku6s.com:天等县| www.683521.com:依安县| www.monobin.com:皋兰县| www.cbplanningpartners.com:金昌市| www.alternateexpressions.com:嘉黎县| www.xinchenba.com:霍山县| www.andyandnina.com:若尔盖县| www.bestfoodsrecipe.com:四子王旗| www.lesprince.com:宜都市| www.sunn99.com:纳雍县| www.www2246v.com:泽库县| www.hbtw.net:武威市| www.digishoppy.com:松滋市| www.caitoule.com:安徽省| www.hayatatutun.com:天门市| www.youhumitwesingit.com:开封县| www.pinkycandylens.com:沁阳市| www.activeppcturkiye.com:弋阳县| www.4000359185.com:樟树市| www.eicsamexico.com:广德县| www.jrjhl.com.cn:伊金霍洛旗| www.baby-photos.net:云林县| www.curvy-lady.com:光泽县| www.bellinghamkiwanis.com:北辰区| www.myphotoestate.com:雷山县| www.aodowear.com:页游| www.homelifepremier.com:兴业县| www.nmmialumni-abq.com:新民市| www.esbtrade.com:淅川县| www.sxkanghe.com:河北省| www.bangdays.com:西华县| www.microseep.com:晴隆县| www.friendsofryankennedy.com:静海县| www.singaku-antenna.com:满洲里市| www.tt-kk-ss.com:曲周县| www.axshiye.com:抚顺县| www.aluminumcane.com:顺昌县| www.therapycenterkita.com:莲花县| www.netcnz.com:特克斯县| www.hunantailift.com:金堂县| www.cp6167.com:商河县| www.jollychang.com:南召县| www.lsyqsm.com:旬邑县| www.tjshuxin.com:龙江县| www.wzdgn.com:延安市| www.escenamobile.com:桐乡市| www.217661.com:正阳县| www.uuxer.com:察哈| www.zjyoushun.com:壶关县| www.better-pm.com:谷城县| www.aoneproduct.com:大埔区| www.cjgzw.com:本溪| www.ingilizcesarkilar.com:如东县| www.steven-z.com:江源县| www.wine2africa.com:鄢陵县| www.taralynnfoxxblog.com:项城市| www.pornofilmid.net:远安县| www.tjshuxin.com:耿马|