<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.ynnss.com:开江县| www.resetv.com:常宁市| www.alishaallport.com:兴业县| www.ibcscout.com:奈曼旗| www.222qa.com:徐州市| www.sadosanmakina.com:鱼台县| www.spmcs.com:河西区| www.9908899.com:永靖县| www.brillonenbarrois.org:论坛| www.spec1als.com:会宁县| www.uggboots999.com:三原县| www.flying-nerd.com:靖西县| www.shuidajie.com:洮南市| www.110df.com:玉林市| www.bjjyzy.com:巩留县| www.abtriv.com:汶上县| www.afterindia.com:会东县| www.juta1gold.com:阿图什市| www.prfacadier.com:无锡市| www.yyyuanyi.com:麟游县| www.vintage-denim.com:藁城市| www.weekdigital.com:武平县| www.chinatourphoto.com:英德市| www.afgj642.com:祁阳县| www.georgiadebtrelief.net:阿拉善左旗| www.aolcoaches.com:辽中县| www.nd733.com:吉隆县| www.besthoalawyer.com:荃湾区| www.martingayford.com:闻喜县| www.bolemaimai.com:奎屯市| www.hibibhoora.com:个旧市| www.mypopularbrand.com:沙洋县| www.g5663.com:静宁县| www.cjbrw.cn:宁海县| www.beautyinimperfections.com:莆田市| www.fundacaoaristidesdesousamendes.com:泰安市| www.zhgtymodel.com:宜君县| www.ohranabg.com:涟源市| www.calentopia.com:班玛县| www.notokfittings.com:临猗县| www.breakerror.com:建湖县| www.xiexiaosuan.com:武宣县| www.jswenzhuomjg.com:揭阳市| www.dizdiva.com:比如县| www.neuropto.com:平塘县| www.kbcnewshub.com:玛沁县| www.tintasetinteiros.com:宽城| www.doubletmortgage.com:重庆市| www.betonaburi.com:奉新县| www.tsctalk.com:门源| www.cloncurrytravel.com:托克托县| www.lvchuanhuanbao.com:屏边| www.trackallpackages.net:蒲江县| www.theraputty.net:乌兰浩特市| www.navarrosent.com:安平县| www.reewallpapers.com:银川市| www.frmep.com:左云县| www.italianfashionllc.com:习水县| www.casagourmande.com:同江市| www.scriedespretine.com:博罗县| www.yourlifebar.com:武定县| www.xashanjia.com:浪卡子县| www.nmgshanhua.com:明水县| www.ph655.com:新民市| www.edwardszmucmd.com:安泽县| www.carandpetspa.com:昭苏县| www.chenxuan88.com:噶尔县| www.qyjmgg.com:自贡市| www.kashoubangzongdai.com:沈丘县| www.xchongqing.com:惠安县| www.sutibao.com:前郭尔| www.euqtn.com:库车县| www.jsc877.com:丰顺县| www.catherinebroad.com:张家港市| www.rwxnw.cn:乐至县| www.lomondtimberframe.com:长寿区| www.hayatatutun.com:辽阳县| www.premium-bux.com:济源市| www.manuel-huber.net:蒙自县| www.gcxlsj.com:达尔| www.wordcountonline.net:九台市| www.jamesstephenshurling.com:县级市| www.km-alliance.com:康定县| www.yxjmei.com:平潭县|