技術標籤：簡單實用的css程式碼csshtmlcss3html5

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聯動起來即可。