In this tutorial, I'll show you how to create a JavaScript pop-up div window layer with the most popular language and the most concise code.
Creating a pop-up div window may be one of the most frequently encountered problems in Web/web production today. The traditional JavaScript window is no longer suitable for the current site design concept, there are two reasons: first, unfriendly--The blunt pop-up dialog box and the "bang" one is a great challenge to the user experience, and second, the compatibility is not strong enough-there are quite a number of browsers shielding this JS alert () Method. As a result, a good user experience Web site requires a more reasonable solution-using very little HTML code, few CSS code, and a few lines of JavaScript code to simulate a browser's default pop-up window (that is, replacing the default alert () interface and features).
Implementation principle:
First, we put the contents of the pop-up box in a special div layer, and then hide it by default (that is, initially invisible, using CSS to achieve). When a 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 at the top of all page elements (which will be implemented using the JS operation). 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 on the button.
implementation process:
As I mentioned above, we first need to create a special div layer, and then we'll put the contents of the pop-up window inside the div layer. Here, we name the ID "popupcontent" to distinguish it from the other div layers.
<div id= "Popupcontent" > This is a div window effect!</div>
CSS Cosmetic code for pop-up windows:
Next, let's make a CSS beautification of this div pop-up layer that has been created above. Some of the most important parameters are: overflow (content overflow), visibility (visibility) and position (positioning). I also add a lot of other code to this window effect, but these are just for landscaping, making this window more gorgeous. So, our final definition of CSS code is as follows:
Copy Code code 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, you can see that this div layer's initial default state is not visible.
You can beautify the above code as needed, but be sure to keep the Position,visibility,overflow three attributes.
JavaScript code is used to trigger and display pop-up windows:
This is probably the most important and interesting part of this tutorial. We will then write 2 process functions to display and hide the div window above. Of course, these two functions will contain some principal logic.
Logic to be included in a procedure function in order:
Calculates where the JavaScript pop-up window is displayed on the screen (position);
Add a status bar (or button) to the pop-up window to close the open window;
Displays a pop-up window.
For simplicity's sake, 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 the coordinate, the downward offset 200PX, and the left offset 200PX.
The size of the pop-up window we can set it in the parameters of the display function, including two parameters: Window length and window width.
If you need to develop the code in this example two times, there is a place that needs special attention, that is, to get the DOM object of the pop-up div layer, we can get the DOM object with the ID named "Popcontent" by using the getElementById function below.
Copy Code code as follows:
var popUp = document.getElementById ("popupcontent");
After getting this (pop-up) Dom object, we can modify the relative position and window size of the window in the JS code.
Copy Code code as follows:
PopUp.style.top = "200px";//window distance from top of browser content area offset value
PopUp.style.left = "200px";//window distance to the leftmost offset value of the browser content area
PopUp.style.width = w + "px";//width of window
PopUp.style.height = h + "px";//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 achieve this function perfectly, we first need to declare a global variable to store the contents of the pop-up div. This is because if you display multiple pop-up windows in a single page, you do not need to duplicate the buttons into these div layers, simplifying the behavior logic:
Copy Code code as follows:
if (Basetext = = null) Basetext = popup.innerhtml;
popup.innerhtml = Basetext +
"<div id=\" statusbar\ "><button onclick=\" hidepopup (); \ >close window <button></div>;
The last place to note is the positioning of the "off" button. This is easy to implement, set the button object's upward margin can be (the number of blank edges set to slightly smaller than the entire pop-up window div height).
At this point, all the behavioral logic is explained, the final window of the display function of the complete code is as follows:
Copy Code code 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 pop-up window:
The process of hiding pop-up windows is fairly straightforward. You just need to get the DOM object of the Div in the pop-up window first, and then set its properties to "hide."
Copy Code code as follows:
function Hidepopup () {
var popUp = document.getElementById ("popupcontent");
popUp.style.visibility = "hidden";
}
Expand the HTML code to finally achieve the window effect:
What we need to do is to add the JS function "ShowPopup ()" to the corresponding event of a link or button.
For example, you need to pop a window when you move the mouse over a connection:
<a href= "#" onmouseover= "ShowPopup (300,200);" >open popup</a>
You need to pop a window when the mouse clicks on a connection:
<a href= "#" onclick= "ShowPopup (300,200);" >open popup</a>
