Home > Developer > JavaScript
The JavaScript pop-up window essentially draws a Square area on the browser and hides it at the beginning, you can only display a JavaScript event by modifying the css attribute value.
The procedure is as follows:
• Create a div for the loading pop-up window
Copy codeThe Code is as follows:
<Html>
<Head>
<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">
</Head>
<Body>
</Body>
<A onclick = "showWin ()" href = "#" mce_href = "#"> dialog box </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>
</Html>
• Create a css file and display it as a pop-up window
Copy codeThe Code is as follows:
# Win {
/* Border */
Border: 1px red solid;
/* Window height and width */
Width: 300px;
Height: 200px;
/* Window position */
Position: absolute;
Top: 100px;
Left: 350px;
/* The window is invisible at the start */
Display: none;
}
/* Control the style of the background color */
# Title {
Background-color: blue;
Color: red;
/* Control the left padding of the title bar */
Padding-left: 3px;
}
# Cotent {
Padding-left: 3px;
Padding-top: 5px;
}
/* Control the location of the close button */
# Close {
Margin-left: 188px;
/* When you move the mouse over X, the effect of a small hand appears */
Cursor: pointer;
}
• Create a JavaScript file to display the window
Copy codeThe Code is as follows:
Function showWin (){
/* Find the div node and return */
Var winNode = $ ("# win ");
// Method 1: Use js to modify the css value to achieve the Display Effect
// WinNode.css ("display", "block ");
// Method 2: Use the show method of jquery to achieve the Display Effect
// WinNode. show ("slow ");
// Method 3: fade in using the fadeIn method of jquery
WinNode. fadeIn ("slow ");
}
Function hide (){
Var winNode = $ ("# win ");
// Method 1: Modify the css Value
// WinNode.css ("display", "none ");
// Method 2: fadeOut method of jquery
WinNode. fadeOut ("slow ");
// Method 3: jquery's hide Method
WinNode. hide ("slow ");
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
