The front-end page pop-up mask prohibits page scrolling

The front-end page pop-up mask prohibits page scrolling

A problem that front-end developers often encounter is creating a pop-up window to prompt users with information. When this pop-up window pops up, it is often accompanied by a gray mask layer that blocks the page content. At the same time, the entire page is covered by this mask and cannot be clicked or scrolled.

Write the picture description here

Solution 1: Control overflow and prohibit scrolling (not compatible with iOS)

It is very simple to create this effect on the PC. You only need to set the height of the HTML to 100% to fill the screen, and set the overflow of the HTML to hidden to ensure that the page cannot be scrolled.
But the same problem is different on mobile devices. Just setting the above attributes of HTML still cannot prevent the page from scrolling beyond the limit on the mobile terminal. We need to set the following code to prevent the page from scrolling when the pop-up box appears:

html.style.overflow="hidden";
html.style.height="100%";
body.style.overflow="hidden";
body.style.height="100%";

The reason is that the mobile terminal is based on touch events. To prohibit scrolling based on touch events, we must, on the basis of prohibiting scrolling in HTML, add a wrapping block-level element to the content that needs to be prohibited from scrolling, and then set the height of this wrapping block-level element to 100% and set overflow:hidden;. Then here we think that body wraps the entire page, which is the block-level element we need. Setting it to prohibit scrolling can ensure that the sliding time of the mobile page will not trigger page scrolling.
When the user closes the pop-up window, the page returns to normal. We set the following CSS style properties to restore the scrolling effect of the entire page:

html.style.overflow="visible";
html.style.height="auto";
body.style.overflow="visible";
body.style.height="auto";

These styles are exactly the default styles of the corresponding CSS properties.
However, this solution has a flaw, which is that it is not compatible with the iOS system, and the black screen effect cannot prevent the page from scrolling. Here is another solution for mobile devices.

Solution 2: Absolute/fixed layout prevents gesture scrolling events from bubbling (not effective on PC)

It is precisely because the scrolling of the mobile terminal is based on the touch event of the screen that the second solution was born (Taobao Mobile uses this solution).
First of all, we need to know two prerequisite knowledge points: 1. For two overlapping page elements, the one with a higher z-index value will trigger event monitoring first, so that you can control whether to let the event flow continue; 2. The touch event of mobile scrolling is based on the event flow.
With the above two knowledge points as a basis, we can understand the design ideas of this solution. The principle of solution 2 is: do not make any changes to the original page, just use a black screen (length and width 100%) with a higher z-index value and an absolute or fixed layout to block the entire page, and listen to the touchstart event of the black screen, end the event flow in the touchstart event, and thus prevent the event flow from continuing. In this way, the touch event that can produce a scrolling effect will not be transmitted to the page, and scrolling will not occur.

Write the picture description here

The complete test source code of solution 2 is posted below:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.main-content{
				position:relative;
				width:100%;
				background-color:#ccc;
				height:2000px;
			}

			.main-content .trigger{
				width:200px;
				height:100px;
				font-size:30px;
				color:#000;
			}

			.main-content .bottom{
				position:absolute;
				bottom:0;
				left:0;
				width:100%;
				height:200px;
				background-color:red;
			}

			.black-shield{
				position:fixed;
				top:0;
				left:0;
				width:100%;
				height:100%;
				background-color:rgba(10,10,10,0.4);
				z-index:10;
			}

			.black-shield .info{
				font-size:40px;
				color:#000;
				border:1px solid;
				z-index:20;
			}
		</style>
	</head>
	<body>
		<div class="main-content">
			<button id="trigger" class="trigger">On/Off</button>
			<div class="bottom"></div>
		</div>
		<div id="shield" class="black-shield" style="display:none;">
			<div id="info" class="info">After the current black screen pops up, the page should not be slidable. Click the current text to close the black screen</div>
		</div>
		
		<script>
			function test2(){
				var showShield=false;
				var shield = document.getElementById("shield");
				var trigger = document.getElementById("trigger");
				var info = document.getElementById("info");
				var body = document.querySelector("body");
				var html = document.querySelector("html");

				//Click to display the black screen trigger.addEventListener("click",function(){
					shield.style.display="block";
				},false);

				//Click to close the black curtain info.addEventListener("touchstart",function(){
					shield.style.display="none";
				},false);

				//Block touch events in the black screen layer shield.addEventListener("touchstart",function(e){
					e.stopPropagation();
					e.preventDefault();
				},false);
			}

			test2();
		</script>
	</body>
</html>

This is the end of this article about the front-end page pop-up mask to prevent page scrolling. For more relevant content about the pop-up mask to prevent page scrolling, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!

<<:  CSS to achieve Cyberpunk 2077 style visual effects in a few steps

>>:  Sample code using vue-router in html

Recommend

Detailed explanation of adding security group rules to Alibaba Cloud Server (graphic tutorial)

Overview of Alibaba Cloud Security Group Sharing ...

A good way to improve your design skills

So-called talent (left brain and right brain) Tha...

Completely uninstall MySQL database in Windows system to reinstall MySQL

1. In the control panel, uninstall all components...

Detailed analysis of several situations in which MySQL indexes fail

1. Leading fuzzy query cannot use index (like ...

How to view the database installation path in MySQL

We can view the installation path of mysql throug...

How to implement function currying and decurrying in Javascript

Function currying (black question mark face)? ? ?...

How to reset MySQL root password

Table of contents 1. Forgot the root password and...

Detailed explanation of the initialization mechanism in bash

Bash Initialization Files Interactive login shell...

The iframe child page operates the parent page and implements the effect of shielding the page pop-up layer

Question: In index.html, iframe introduces son.htm...

Vue implements countdown between specified dates

This article example shares the specific code of ...

A detailed introduction to setting up Jenkins on Tencent Cloud Server

Table of contents 1. Connect to Tencent Cloud Ser...

Detailed explanation of data transmission between React parent components and child components

Table of contents 1. Parent component passes data...

Vue implements real-time refresh of the time display in the upper right corner

This article example shares the specific code of ...

Vue+canvas realizes the effect of refreshing waterfall chart from top to bottom in real time (similar to QT)

Without further ado, here is a demo picture. The ...

MySQL query sorting and paging related

Overview It is usually not what we want to presen...