How to Create a JavaScript pop-up DIV window Layer Effect

In this tutorial, I will use the most popular language and the most concise code to demonstrate how to create a JavaScript pop-up DIV window layer.

Creating a pop-up DIV window may be one of the most common problems in website/Webpage creation. The traditional JavaScript pop-up window is no longer suitable for the current website design philosophy. There are two reasons: first, unfriendly-a stiff pop-up dialog box with a "quit" voice poses a great challenge to the user experience. Second, compatibility is not strong enough-a considerable number of browsers have shielded this JS Alert () method. Therefore, a website with good user experience needs a more reasonable solution-using few HTML code, few CSS codes and several lines of JavaScript code are used to simulate the default pop-up window of the browser (that is, the default Alert () interface and function are replaced ).

Implementation principle:

First, place the content in the pop-up box in a special DIV layer, and hide it by default (that is, it is initially invisible and can be implemented using CSS ). When a user executes an action, such as clicking a link or moving the cursor over a link, the hidden layer is displayed on the top of all page elements (JS operations are used ). ). In addition, we will set a button in the pop-up DIV window to execute the function of closing the window when the user clicks this button.

Implementation process:

As mentioned above, we first need to create a special DIV layer, and then place the content of the pop-up window in this DIV layer. Here, we name its ID "popupcontent" to distinguish it from other DIV layers.

<Div id = "popupcontent"> This is a DIV pop-up window! </Div>

The CSS modifier code in the pop-up window:

Next, let's beautify the CSS for the created DIV pop-up layer. The most important parameters are overflow, visibility, and position ). At the same time, I also added a lot of other code for the window effect, but these are only used for beautification, making the window more beautiful. Therefore, the CSS code we finally define is like:
Copy codeThe Code is as follows:
# Popupcontent {
Position: absolute;
Visibility: hidden;
Overflow: hidden;
Border: 1px solid # CCC;
Background-color: # F9F9F9;
Border: 1px solid #333;
Padding: 5px;
}

The red part in the above CSS Code shows that the initial default status of the DIV layer is invisible.

You can beautify the above Code as needed, but be sure to keep the position, visibility, and overflow attributes.

The JavaScript code is used to trigger and display the pop-up window:

This may be the most important and interesting part of this tutorial. We will compile two process functions to show and hide the above DIV pop-up window respectively. Of course, these two functions contain some subject logic.

Logic that needs to be included in sequence in process functions:

Calculate the position (positioning) of the JavaScript pop-up window on the screen );
In the pop-up window, add a status bar (or button) to close the window in the open status;
The pop-up window is displayed.

For the sake of simplicity, the display position we set in this example is Top: 200, Left: 200. That is, the upper left corner of the browser content box is taken as the coordinates, and the offset is 200PX down and 200PX to the left.

The window size can be set in the parameters of the display function, including two parameters: Window Length and window width.

If you need to perform secondary development of the code in this example, you need to pay special attention to getting the DOM object of the DIV layer in the pop-up window, we can use the getElementById function below to obtain the DOM object named "Popcontent.
Copy codeThe Code is as follows:
Var popUp = document. getElementById ("popupcontent ");

After obtaining the DOM object (in the pop-up window), we can modify the relative position and size of the window in JS Code.
Copy codeThe Code is as follows:
PopUp. style. top = "200px"; // offset of the window from the top of the browser content area

PopUp. style. left = "200px"; // offset of the window from the leftmost part of the browser content area

PopUp. style. width = w + "px"; // The window width

PopUp. style. height = h + "px"; // window height

Next, we need to add a "close" button to the window to close the window when it is enabled. To implement this function perfectly, we first need to declare a global variable to store the content in the pop-up window DIV. This is because, if multiple pop-up windows with different content are displayed on a page, you do not need to copy the buttons repeatedly to these DIV layers, which simplifies the behavior logic:
Copy codeThe Code is as follows:
If (baseText = null) baseText = popUp. innerHTML;

PopUp. innerHTML = baseText +

"<Div id = \" statusbar \ "> <button onclick = \" hidePopup (); \ "> Close window <button> </div> ";

The last thing to note is how to locate the "close" button. This is easy to implement. Set the up blank side of the button object (the value of the blank side is slightly smaller than the DIV height of the entire pop-up window ).

Now, all the action logic is explained. The complete code of the function is displayed in the pop-up window as follows:
Copy codeThe Code is as follows:
Var baseText = null;

Function showPopup (w, h ){
Var popUp = document. getElementById ("popupcontent ");
PopUp. style. top = "200px ";
PopUp. style. left = "200px ";
PopUp. style. width = w + "px ";
PopUp. style. height = h + "px ";
If (baseText = null) baseText = popUp. innerHTML;
PopUp. innerHTML = baseText + "<div id = \" statusbar \ "> <button onclick = \" hidePopup ();
\ "> Close window <button> </div> ";
Var sbar = document. getElementById ("statusbar ");
Sbar. style. marginTop = (parseInt (h)-40) + "px ";
PopUp. style. visibility = "visible ";
}

Hide the pop-up window:

Hiding the pop-up window is quite simple. You only need to first obtain the DOM object of the DIV in the pop-up window, and then set its attribute to "hide.
Copy codeThe Code is as follows:
Function hidePopup (){
Var popUp = document. getElementById ("popupcontent ");
PopUp. style. visibility = "hidden ";
}

Expand the HTML code to achieve the pop-up effect:

All we need to do is add the JS function "showPopup ()" on the corresponding event of a link or button.

For example, a window pops up when you move the cursor over a connection:

<A href = "#" onmouseover = "showPopup (300,200);"> Open popup </a>

You need to click a connection to bring up a window:

<A href = "#" onclick = "showPopup (300,200);"> Open popup </a>