Home >Web Front-end >JS Tutorial >Example code for jquery to achieve pop-up window effect_jquery

Example code for jquery to achieve pop-up window effect_jquery

WBOYOriginal: 2016-05-16 17:12:061239browse

JavaScript to implement a pop-up window is essentially to draw a square area on the browser, hide it at the beginning, and only display it by modifying the css attribute value when a JavaScript event occurs.

The general steps are:

< ;html>

jQuery Example 1: Floating Window

< /body>

Pop-up window

I am the title bar! X

I am a window!
🎜>

Copy code

The code is as follows:

#win{
/*border*/
border:1px red solid ;
/*The height and width of the window*/
width: 300px;
height: 200px;
/*The position of the window*/

position: absolute;
top: 100px ;
left: 350px;

/*The window is invisible at the beginning*/ display: none;}/*Control the style of the background color*/#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 moves to the >



Copy code


 The 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 jquery's show method to achieve the display effect
 // winNode.show("slow");
 //Method 3: Use jquery's fadeIn method to achieve fade-in
 winNode.fadeIn("slow");
}
function hide(){
 var winNode = $("#win");
 //Method 1: Modify the value of css

//winNode.css("display", "none");
//Method 2: jquery's fadeOut method
winNode.fadeOut("slow");

//Method 3: jquery hide method winNode.hide("slow");}

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js string interception function substr substring slice usage comparison_javascript skillsNext article：js string interception function substr substring slice usage comparison_javascript skills

See more

Example code for jquery to achieve pop-up window effect_jquery

Related articles