CSS realizes the window locking effect with pop-up window centered up, down, left and right and transparent background

Time:2021-12-4

There is a simple CSS method to center the pop-up box up, down, left and right after clicking, and attach a gray transparent mask to lock the window and clear the scroll bar

在这里插入图片描述

HTML code

<div class="box">
	<div class="boxs">
	    <!--  White pop-up window -- >
	</div>
</div>

CSS code


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;
 }

Using position: fixed to fix the transparent background element can effectively lock the window and prevent the scroll bar from scrolling, and the child element can be centered up, down, left and right by positioning inside the parent element. As for the pop-up operation, you only need to link the click event with none and block of the display attribute of the outer Div.

This is the end of this article about CSS pop-up window centered up, down, left, right and background transparent locking window. For more information about CSS pop-up window centered background transparent locking window, please search for previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!