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仿蘋果平滑開關按鈕效果,本文通過實例代碼給大家介紹的非常想詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-25
這篇文章主要介紹了css實現彈窗上下左右居中且背景透明鎖定窗口效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參2020-12-23css 利用 position + margin 實現固定盒子橫向縱向居中的方法
這篇文章主要介紹了css 利用 position + margin 實現固定盒子橫向縱向居中的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要2020-12-23
這篇文章主要介紹了CSS 鼠標懸浮在圖片上添加遮罩層效果的實現,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-17
這篇文章主要介紹了總結下常用的nth-child選擇符，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學2020-12-11- 這篇文章主要介紹了CSS3簡易切割輪播圖的實現代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學2020-12-09
table表格使用:nth-child()實現隔行變色與對齊
在html中，使用table表格展示數據是一種非常方面的途徑，有的時候我們希望表格內的數據實現不同的對齊方式，以便符合閱讀的習慣，比如日期列居左，數字通常居右對齊2020-12-08
這篇文章主要介紹了CSS實現背景圖片屏幕自適應的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學2020-12-07
這篇文章主要介紹了CSS實現小圖下拉查看大圖和信息的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一2020-12-07
這篇文章主要介紹了純CSS實現的下拉菜單的示例代碼，幫助大家更好的理解和使用CSS特效，感興趣的朋友可以了解下2020-12-07
最新評論