Javascript implements a simple pop-up window, javascript implementation

Javascript implements a simple pop-up window, javascript implementation

Function Description: click a button, and a window will pop up on the page. The original content of the page will remain unchanged, but a mask layer is added to the page with opacity set, the pop-up window can be set at a fixed location or freely. It is common in the logon button of a website.

Html page:

<! DOCTYPE html> 
Js Code:
<Script> function openNew () {// obtain the page height and width var sWidth = document. body. scrollWidth; var sHeight = document. body. scrollHeight; // obtain the height and width of the visible area of the page var wheight?document.doc umentElement. clientHeight; var oMask = document. createElement ("div"); oMask. id = "mask"; oMask. style. height = sHeight + "px"; oMask. style. width = sWidth + "px"; document. body. appendChild (oMask); var oLogin = document. createElement ("div"); oLogin. id = "login"; oLogin. innerHTML = "<div class = 'logincon '> <div id = 'close'> close </div>"; document. body. appendChild (oLogin); // obtain the width and height of the logon box var dHeight = oLogin. offsetHeight; var dWidth = oLogin. offsetWidth; // set left and top oLogin In the login box. style. left = sWidth/2-dWidth/2 + "px"; oLogin. style. top = wHeight/2-dHeight/2 + "px"; // click the close button var oClose = document. getElementById ("close"); // you can close oClose in a region other than the logon box. onclick = oMask. onclick = function () {document. body. removeChild (oLogin); document. body. removeChild (oMask) ;};}; window. onload = function () {var oBtn = document. getElementById ("btnLogin"); // click the logon button oBtn. onclick = function () {openNew (); return false ;}</script>

Articles you may be interested in:

 

 
  
Javascript control pop-up window
 
  
In the lower-right corner of js, a window is displayed. Click to close the window.
 
  
JS pop-up window code Daquan (detailed)
 
  
How to display the front of the js pop-up window
 
  
Examples of js implementation pop-up window, page turns gray and not operable
 
  
JavaScript pop-up window method summary
 
  
Disable all js scripts such as alert and pop-up windows on the iframe page.
 
  
JS + CSS implementation method with closed button DIV pop-up window
 
  
JS + CSS: How to darken the background in a Div pop-up window
 
  
How to dynamically modify the pop-up window size using JavaScript
 
  
Js achieves pop-up window effect for imitation qq messages