CSS to achieve pop-up window up and down center left and right and transparent background lock window effect

There is a simple CSS method to realize the pop-up box after clicking, centering it up, down, left, and right, and adding 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 transparent background elements can effectively lock the window to prevent the scroll bar from scrolling, and positioning inside the parent element can be used to center the child element up, down, left, and right. As for the pop-up operation, you only need to link the click event with the display attribute of the outer div, which is none and block.

This is the end of this article about how to use CSS to center the pop-up window with a transparent background and lock the window. For more information about how to center the pop-up window with a transparent background and lock the window, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!