A subwindow pops up on the original webpage and implements a translucent background. The original webpage's scroll effect becomes invalid.

Today, when we create a page similar to the petal collection function, we need to achieve the following page effect: A New subwindow B is displayed on the original page, at the same time, the original page a is overwritten by a transparent layer C, and the layer C is under the Child Window B and above page A; the scroll axis of the original page a disappears, and the page cannot be rolled, the Scroll of subwindow B is not impressive ..

Write down the following operations:

1. Place child window B and layer C in the same Div and append them together to the body tag.

Refer to the HTML code:

<div id="inBody">　　<div class="B"></div>　　<div class="C"></div></div>

Refer to CSS:

# Idbody {display: none;/* block operation performed only after loading to the webpage */}. B {z-index: 999;/* if you want to keep it at the top of the page, define this value as much as possible */position: fixed; /* the following attributes enable fixed-size sub-window center */top: 50%;/* place the upper left corner of the sub-window in the middle of the page and adjust it using margin */left: 50%; width: 500px; Height: 300px; margin-left:-250px;/* margin-left and top are always the negative half of fixed width and height */margin-top:-150px; /* Other CSS */}. c {z-index: 998;/* because it is always under subwindow B, it can be a little smaller than subwindow B. */Background: rgba (255. 255. 255. 0.6);/* implement transparent layers */position: fixed;/* implement the following layers to overwrite the entire browser page */top: 0; Right: 0; bottom: 0; left: 0 ;}

 

2. Block the scrolling function of the original web page.

Refer to JS Code:

$ ('Getinbox '). click (function () {/* click to bring up the subwindow B */functions ('body'0000.css ('overflow-x', 'hiddd '); /* automatically remove the scroll axis of the original webpage a */Optional ('body'0000.css ('overflow-y', 'hiddy'); $ ('. inbox '). slow (100) ;}) $ ('delinbox '). click (function () {/* close subwindow B */fill ('body'0000.css ('overflow', 'auto');/* restore the scroll axis of original page a */$ ('. inbox '). hide (100 );})

 

 

Digress: JS disables the scroll effect of the mouse:

 

window.onmousewheel=function(){return false};