The JavaScript implementation pop-up window essentially draws a square area on the browser and hides it at the beginning, only to display it by modifying the CSS property values when it comes to a JavaScript event.
The approximate steps are:
• Create a div that loads a pop-up window
Copy Code code as follows:
<title>jquery Instance 1: Floating window </title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<mce:script type= "Text/javascript" src= "Jslib/jquery.js" mce_src= "Jslib/jquery.js" ></mce:script>
<mce:script type= "Text/javascript" src= "Jslib/jquerywin.js" mce_src= "Jslib/jquerywin.js" ></mce:script >
<link type= "Text/css" rel= "stylesheet" href= "Css/win.css" mce_href= "Css/win.css" >
<body>
</body>
<a onclick= "Showwin ()" href= "#" mce_href= "#" > Pop-up </a>
<div id= "Win" >
<div id= "title" > I am the title bar! <span id= "Close" onclick= "Hide ()" >X</span></div>
<div id= "Content" > I am a window! </div>
</div>
• Create the appropriate CSS file to display as a pop-up window
Copy code code as follows:
#win {
/* Border * *
BORDER:1PX Red Solid;
/* Height and width of window * *
width:300px;
height:200px;
/* The position of the window * *
Position:absolute;
top:100px;
left:350px;
/* The window is not visible at the start * *
Display:none;
}
/* Control the background color style * *
#title {
Background-color:blue;
color:red;
/* Control the left inner margin of the title bar * *
padding-left:3px;
}
#cotent {
padding-left:3px;
padding-top:5px;
}
/* Control the position of the close button.
#close {
margin-left:188px;
* * When the mouse moved to the X, the effect of small hands * *
Cursor:pointer;
}
• Create a corresponding JavaScript file to manipulate the display of the window
Copy Code code as follows:
function Showwin () {
/* Find div node and return * *
var Winnode = $ ("#win");
Method One: Use JS to modify the value of CSS to achieve the display effect
WINNODE.CSS ("Display", "block");
Method Two: Using the Show method of jquery to realize the display effect
Winnode.show ("slow");
Method Three: Using jquery Fadein method to implement fade in
Winnode.fadein ("slow");
}
function Hide () {
var Winnode = $ ("#win");
Method One: Modify the value of the CSS
WINNODE.CSS ("Display", "none");
Method Two: The Fadeout way of jquery
Winnode.fadeout ("slow");
Method Three: The Hide method of jquery
Winnode.hide ("slow");
}
