In this tutorial, I will use the most popular language and the most concise code to demonstrate to you how to create a JavaScript pop-up DIV window layer.
Creating a pop-up DIV window is probably one of the most common problems encountered in website/web production now. Traditional JavaScript pop-ups are no longer suitable for the current website design concept. There are two reasons: First, it is unfriendly - the blunt pop-up dialog box is a big challenge to the user experience; second, the compatibility is not strong enough - there are quite a lot of browsers blocking this JS Alert() method. Therefore, a website with a 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 popup (i.e. replacing the default Alert() interface and features).
Implementation principle:
First, we place the contents in the pop-up box in a special DIV layer and then hide it by default (i.e., initially invisible, it can be achieved with CSS). When a user performs an action—such as clicking on a link or moving the mouse cursor to a link—we display the previously set hidden layer on the 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 into this DIV layer. Here we name its ID "popupcontent" to distinguish it from other DIV layers.
<div >This is a DIV pop-up effect!</div>
CSS modification code for pop-up window:
Next, let's CSS beautify the DIV popup layer that has been created above. The most important parameters are: overflow (content overflow), visibility (visibility) and position (positioning method). At the same time, I have also added a lot of other codes to this window effect, but these are just used for beautification to make this window more gorgeous. So, the CSS code we defined last is like:
#popupcontent{
position: absolute;
visibility: hidden;
overflow: hidden;
border:1px solid #CCC;
background-color:#F9F9F9;
border:1px solid #333;
padding:5px;
}
From the red part of the CSS code above, we can see that the initial default state of this DIV layer is invisible.
You can beautify the above code as needed, but be sure to retain the three attributes of position, visibility, and overflow.
JavaScript code is used to trigger and display popups:
This is probably the most important and interesting part of this tutorial. Next we will write two process functions to display and hide the DIV pop-up window above. Of course, these two functions will contain some body logic.
The logic that needs to be included in the process function in sequence:
Calculate the display position (positioning) of the JavaScript popup window on the screen;
Add a status bar (or button) to the pop-up window to close the window in the open state;
Show pop-up window.
For simplicity, the display position we set in this example is Top: 200 and Left: 200. That is, use the upper left corner of the browser content box as the coordinates, offset 200PX downwards 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 secondary development of the code in this example, there is one thing that needs special attention, which is to obtain the DOM object of the DIV layer of the pop-up window. We can use the following getElementById function to obtain the DOM object with the ID name "Popcontent".
var popUp = ("popupcontent");
After getting this (pop-up window) DOM object, we can modify the relative position and window size of the window in the JS code.
= "200px";//The offset value of the window from the top of the browser content area
= "200px";//The offset value of the window from the leftmost part of the browser content area
= w + "px";//Width of the window
= h + "px";//The height of the window
Next, we need to add a "Close" button to the window to close the window when the window is open. To perfectly implement this function, we first need to declare a global variable to store the contents in the pop-up DIV. This is because if you display multiple popups with different content in a page, you don't need to copy the buttons repeatedly into these DIV layers, which simplifies behavioral logic:
if (baseText == null) baseText = ;
= baseText +
"<div id=\"statusbar\"><button onclick=\"hidePopup();\">Close window <button></div>";
The last thing to note is the positioning problem of this "close" button. This is easy to implement. Just set the upward blank edge of this button object (the value of the blank edge is slightly smaller than the DIV height of the entire pop-up window).
At this point, all the behavior logic has been explained, and the complete code of the final pop-up window is as follows:
var baseText = null;
function showPopup(w,h){
var popUp = ("popupcontent");
= "200px";
= "200px";
= w + "px";
= h + "px";
if (baseText == null) baseText = ;
= baseText + "<div id=\"statusbar\"><button onclick=\"hidePopup();
\">Close window<button></div>";
var sbar = ("statusbar");
= (parseInt(h)-40) + "px";
= "visible";
}
Hide pop-up window:
The process of hiding a pop-up window is quite simple. Just first get the DOM object of the DIV in the pop-up window, and then set its properties to "hide".
function hidePopup(){
var popUp = ("popupcontent");
= "hidden";
}
Expand HTML code and finally achieve 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, a pop-up window needs to be displayed when the mouse moves to a connection:
<a href="#" onmouseover="showPopup(300,200);" >Open popup</a>
A pop-up window needs to be displayed when the mouse clicks on a connection:
<a href="#" onclick="showPopup(300,200);" >Open popup</a>
Creating a pop-up DIV window is probably one of the most common problems encountered in website/web production now. Traditional JavaScript pop-ups are no longer suitable for the current website design concept. There are two reasons: First, it is unfriendly - the blunt pop-up dialog box is a big challenge to the user experience; second, the compatibility is not strong enough - there are quite a lot of browsers blocking this JS Alert() method. Therefore, a website with a 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 popup (i.e. replacing the default Alert() interface and features).
Implementation principle:
First, we place the contents in the pop-up box in a special DIV layer and then hide it by default (i.e., initially invisible, it can be achieved with CSS). When a user performs an action—such as clicking on a link or moving the mouse cursor to a link—we display the previously set hidden layer on the 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 into this DIV layer. Here we name its ID "popupcontent" to distinguish it from other DIV layers.
<div >This is a DIV pop-up effect!</div>
CSS modification code for pop-up window:
Next, let's CSS beautify the DIV popup layer that has been created above. The most important parameters are: overflow (content overflow), visibility (visibility) and position (positioning method). At the same time, I have also added a lot of other codes to this window effect, but these are just used for beautification to make this window more gorgeous. So, the CSS code we defined last is like:
Copy the 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;
}
From the red part of the CSS code above, we can see that the initial default state of this DIV layer is invisible.
You can beautify the above code as needed, but be sure to retain the three attributes of position, visibility, and overflow.
JavaScript code is used to trigger and display popups:
This is probably the most important and interesting part of this tutorial. Next we will write two process functions to display and hide the DIV pop-up window above. Of course, these two functions will contain some body logic.
The logic that needs to be included in the process function in sequence:
Calculate the display position (positioning) of the JavaScript popup window on the screen;
Add a status bar (or button) to the pop-up window to close the window in the open state;
Show pop-up window.
For simplicity, the display position we set in this example is Top: 200 and Left: 200. That is, use the upper left corner of the browser content box as the coordinates, offset 200PX downwards 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 secondary development of the code in this example, there is one thing that needs special attention, which is to obtain the DOM object of the DIV layer of the pop-up window. We can use the following getElementById function to obtain the DOM object with the ID name "Popcontent".
Copy the codeThe code is as follows:
var popUp = ("popupcontent");
After getting this (pop-up window) DOM object, we can modify the relative position and window size of the window in the JS code.
Copy the codeThe code is as follows:
= "200px";//The offset value of the window from the top of the browser content area
= "200px";//The offset value of the window from the leftmost part of the browser content area
= w + "px";//Width of the window
= h + "px";//The height of the window
Next, we need to add a "Close" button to the window to close the window when the window is open. To perfectly implement this function, we first need to declare a global variable to store the contents in the pop-up DIV. This is because if you display multiple popups with different content in a page, you don't need to copy the buttons repeatedly into these DIV layers, which simplifies behavioral logic:
Copy the codeThe code is as follows:
if (baseText == null) baseText = ;
= baseText +
"<div id=\"statusbar\"><button onclick=\"hidePopup();\">Close window <button></div>";
The last thing to note is the positioning problem of this "close" button. This is easy to implement. Just set the upward blank edge of this button object (the value of the blank edge is slightly smaller than the DIV height of the entire pop-up window).
At this point, all the behavior logic has been explained, and the complete code of the final pop-up window is as follows:
Copy the codeThe code is as follows:
var baseText = null;
function showPopup(w,h){
var popUp = ("popupcontent");
= "200px";
= "200px";
= w + "px";
= h + "px";
if (baseText == null) baseText = ;
= baseText + "<div id=\"statusbar\"><button onclick=\"hidePopup();
\">Close window<button></div>";
var sbar = ("statusbar");
= (parseInt(h)-40) + "px";
= "visible";
}
Hide pop-up window:
The process of hiding a pop-up window is quite simple. Just first get the DOM object of the DIV in the pop-up window, and then set its properties to "hide".
Copy the codeThe code is as follows:
function hidePopup(){
var popUp = ("popupcontent");
= "hidden";
}
Expand HTML code and finally achieve 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, a pop-up window needs to be displayed when the mouse moves to a connection:
<a href="#" onmouseover="showPopup(300,200);" >Open popup</a>
A pop-up window needs to be displayed when the mouse clicks on a connection:
<a href="#" onclick="showPopup(300,200);" >Open popup</a>