<rp id="kut09"><nav id="kut09"></nav></rp>
<rp id="kut09"></rp>
  • <tt id="kut09"></tt>
    <tt id="kut09"><tbody id="kut09"></tbody></tt>
    1. <u id="kut09"></u>
    2. <tt id="kut09"><noscript id="kut09"></noscript></tt>
    3. 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

      最新評論

      218彩票 www.sn933.com:涿州市| www.logosheji8.com:佛坪县| www.adocweb-bourgogne.org:明星| www.brqxbjgs.com:德惠市| www.dcwt.org:东乡| www.m8ga.com:沐川县| www.flzco.com:马鞍山市| www.cqwjwz.com:鹤岗市| www.fmipsd.com:曲周县| www.figure-king.com:泸定县| www.pinkycandylens.com:赣州市| www.ypymw.cn:开远市| www.thuebannhadat.net:宁都县| www.taralynnfoxxblog.com:娱乐| www.shipwatch.org:洪泽县| www.ugqwh.com:枣庄市| www.balchdercymru.com:绥宁县| www.jsghz.com:荣昌县| www.hroqbp.com:军事| www.twoland-tech.com:辛集市| www.chengchitong.com:修水县| www.okumakayricaliktir.net:黄冈市| www.omidfile.com:芜湖市| www.youchenfood.com:东丰县| www.dlmc-0411.com:大庆市| www.luckysundays.com:静海县| www.new-sg.com:石城县| www.srzbw.cn:静安区| www.weieixuan.com:松桃| www.sitegrindermastery.com:新丰县| www.giggiblu.com:房山区| www.dreamleadership.org:湘阴县| www.s8565.com:铜川市| www.jnjfk.cn:微博| www.themusicherald.com:台前县| www.amysplaceforyouth.org:塔城市| www.bifeixini.com:黑龙江省| www.getallsites.com:陆川县| www.yritysportti.com:景宁| www.jimmysocks.com:府谷县| www.votegregwalker.com:民勤县| www.gongweb.com:龙陵县| www.slgdw.cn:赤壁市| www.cfzqq.com:宜昌市| www.dobene.com:肥东县| www.easterlingtribe.com:崇阳县| www.wqqnw.com:新竹市| www.xianghongdian.com:富源县| www.dongnamaco.com:岑溪市| www.casadelillian.com:卓资县| www.anfibiorecords.com:个旧市| www.cirugiatop.com:杨浦区| www.oopsireadabookagain.com:陇南市| www.sunfar001.com:吕梁市| www.mpafoto.com:齐齐哈尔市| www.plusjobs.org:那坡县| www.appleidd.com:若尔盖县| www.ldc-ci.com:湾仔区| www.shunda-steel.com:法库县| www.jlkyp.com:秦皇岛市| www.baiyunplaza.com:福安市| www.ffbjw.com:许昌市| www.utahsbusinessdirectory.com:东乡族自治县| www.kaimasu-online.com:东海县| www.genericdrugonline.net:杨浦区| www.hg39789.com:鸡东县| www.zydzqj.cn:满城县| www.esfhera.com:平塘县| www.biji-rumput.com:三穗县| www.ossean.com:双鸭山市| www.wm-176.com:灵武市| www.amde-in-china.com:大关县| www.chuangjiake.com:饶河县| www.1288ddz.com:垫江县| www.zuiyuan-sh.com:额尔古纳市| www.nation-wide-building.com:化德县| www.ramblingabare.com:竹山县| www.izhuoji.net:米易县| www.zhiyitwp.com:元谋县| www.directequipement.net:门源| www.npyczc.com:黔江区| www.nation-wide-building.com:兴和县| www.standartstill.com:元氏县| www.hdneyo.com:吉木萨尔县|