How to create a JavaScript pop-up DIV window layer effect_javascript skills

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

Creating a pop-up DIV window may be one of the most common problems encountered in website/webpage production. The traditional JavaScript pop-up window is no longer suitable for the current website design concept for two reasons: first, it is unfriendly - a stiff pop-up dialog box accompanied by a "bang" sound is a big challenge to the user experience; second, it is not compatible with Not strong enough - quite a few browsers block this JS Alert() method. Therefore, a website with good user experience needs a more reasonable solution - using very little HTML code, very little CSS code and a few lines of JavaScript code to simulate the browser's default pop-up window (that is, replace the default Alert() interface and functions).

Implementation principle:

First, we place the content in the pop-up box in a special DIV layer, and then hide it by default (i.e. initially invisible, use CSS can achieve this). When the user performs an action - such as clicking on a link or moving the mouse cursor over a link - we will display the previously set hidden layer on top of all page elements (which will be implemented using JS operations). In addition, we will also set a button in the pop-up DIV window to perform the function of closing the window when the user clicks this button.

Implementation process:

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

This is a DIV pop-up window effect!

CSS modification code for the pop-up window:

Next, let’s beautify the DIV popup layer created above with CSS. The most important parameters are: overflow (content overflow), visibility (visibility) and position (positioning method). At the same time, I also added a lot of other codes to this window effect, but these are only used to beautify and make this window more gorgeous. Therefore, the CSS code we finally defined looks like:

Copy code The code is as follows:

# popupcontent{
position: absolute;
visibility: hidden;
overflow: hidden;
border:1px solid #CCC;
background-color:#F9F9F9;
border:1px solid #333;
padding:5px;
}

As you can see from the red part in the CSS code above: the initial default state of this DIV layer is invisible.

You can beautify the above code as needed, but please be sure to retain the three attributes of position, visibility, and overflow.

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

This is probably the most important and interesting part of this tutorial. We will next write two process functions to display and hide the DIV pop-up window above. Of course, these two functions will contain some main logic.

Logic that needs to be included sequentially in the process function:

Calculate the display position (positioning) of the JavaScript pop-up window on the screen;
Add a status bar (or button) in the pop-up window , used to close an open window;
Display a pop-up window.

For the sake of simplicity, the display positions we set in this example are Top: 200, Left: 200. That is, taking the upper left corner of the browser content box as the coordinate, offset 200PX downward and 200PX left.

We can set the size of the pop-up window in the parameters of the display function, including two parameters: window length and window width.

If you need to re-develop the code in this example, there is one place that needs special attention, that is to obtain the DOM object of the DIV layer of the pop-up window. We can obtain the ID name through the getElementById function below. The DOM object of "Popcontent".

Copy code The code is as follows:

var popUp = document.getElementById("popupcontent");

After obtaining this (pop-up window) DOM object, we can modify the relative position and window size of the window in the JS code.

Copy code The code is as follows:

popUp.style.top = "200px";// The offset value of the window from the top of the browser content area

popUp.style.left = "200px";//The offset value of the window from the leftmost of the browser content area

popUp. style.width = w "px";//The width of the window

popUp.style.height = h "px";//The height of the window

Next, we need to add a "Close" button to the window to close the window when it is open. To implement this function perfectly, first we need to declare a global variable to store the content in the pop-up window DIV. This is because if you display multiple pop-up windows with different contents on one page, you do not need to repeatedly copy the buttons to these DIV layers, which simplifies the behavior logic:

Copy code The code is as follows:

if (baseText == null) baseText = popUp.innerHTML;

popUp.innerHTML = baseText

"

Close window

";

The last thing that needs attention is the positioning of the "Close" button. This is easy to implement. Just set the upward blank side of the button object (the value of the blank side can be set to be slightly smaller than the DIV height of the entire pop-up window).

At this point, all the behavioral logic has been explained. The complete code of the final pop-up window display function is as follows:

Copy code The 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 "

Close window

";
var sbar = document.getElementById("statusbar");
sbar.style.marginTop = (parseInt(h)-40) "px" ;
popUp.style.visibility = "visible";
}

Hide the pop-up window:

The process of hiding the pop-up window is quite Simple. You only need to first obtain the DOM object of the DIV of the pop-up window, and then set its attribute to "hidden".

Copy code The code is as follows:

function hidePopup(){
var popUp = document .getElementById("popupcontent");
popUp.style.visibility = "hidden";
}

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

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

For example, if you need to pop up a window when the mouse moves over a certain connection:

Open popup
Need to pop up a window when the mouse clicks on a connection:

Open popup