Jquery implementation of the pop up window effect of the instance code
- 2020-03-30 00:02:55
- OfStack
JavaScript implementation pop-up Windows essentially draw a square area on the browser, hide it at first, and display it only at some JavaScript event by changing the CSS property value.
The general steps are as follows:
The & # 8226; Create a div to load the pop-up window
<html>
<head>
<title>jQuery The 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="#"> The pop-up window </a>
<div id="win">
<div id="title"> I'm the title bar! <span id="close" onclick="hide()">X</span></div>
<div id="content"> I am a window! </div>
</div>
</html>
The & # 8226; Create the corresponding CSS file and display it as a pop-up window
#win{
border:1px red solid;
width : 300px;
height: 200px;
position : absolute;
top : 100px;
left: 350px;
display : none;
}
#title{
background-color : blue;
color : red;
padding-left: 3px;
}
#cotent{
padding-left : 3px;
padding-top : 5px;
}
#close{
margin-left: 188px;
cursor: pointer;
}
The & # 8226; Create the appropriate JavaScript file to manipulate the display of the window
function showWin(){
var winNode = $("#win");
//Method 1: using js to modify the value of CSS, to achieve the display effect
// winNode.css("display", "block");
//Method 2: using jquery's show method to achieve the display effect
// winNode.show("slow");
//Method 3: fadeIn method of jquery
winNode.fadeIn("slow");
}
function hide(){
var winNode = $("#win");
//Method 1: modify the CSS values
//winNode.css("display", "none");
//Method 2: fadeOut mode of jquery
winNode.fadeOut("slow");
//Method 3: jquery's hide method
winNode.hide("slow");
}