Home > Developer > JavaScript
Core code:
Copy codeThe Code is as follows:
// Obtain the window height
Var success wheight;
// Obtain the window width
Var implements wwidth;
// Obtain the pop-up window width
Var popWidth;
// Obtain the pop-up window height
Var popHeight;
Function init (){
Optional wheight = $ (window). height ();
Required wwidth = $ (window). width ();
PopHeight = $ (". window"). height ();
PopWidth = $ (". window"). width ();
}
// Close the window
Function closeWindow (){
$ (". Title img"). click (function (){
$ (This). parent (). parent (). hide ("slow ");
});
}
// Define the method for displaying the center window
Function popCenterWindow (){
Init ();
// Calculate the offset of Y in the upper left corner of the pop-up window.
Var popY = (windowHeight-popHeight)/2;
Var popX = (required wwidth-popWidth)/2;
// Alert ('www .jb51.net ');
// Set the window position
$ ("# Center" ).css ("top", popy).css ("left", popX). slideToggle ("slow ");
CloseWindow ();
}
Function popLeftWindow (){
Init ();
// Calculate the offset of Y in the upper left corner of the pop-up window.
Var popY = shadowwheight-popHeight;
// Var popX =-(required wwidth-popWidth );
// Alert (popY );
// Set the window position
$ ("# Left" ).css ("top", popy-50..css ("left", 50). slideToggle ("slow ");
CloseWindow ();
}
Function popRightWindow (){
Init ();
// Calculate the offset of Y in the upper left corner of the pop-up window.
Var popY = shadowwheight-popHeight;
Var popX = required wwidth-popWidth;
// Alert (www.cnblogs.com/jihua );
// Set the window position
$ ("# Right" ).css ("top", popy-50).css ("left", popX-50). slideToggle ("slow ");
CloseWindow ();
}
Complete code:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = UTF-8 "/> <title> jQuery pop-up window-script house </title> <style type =" text/css ">. window {width: 250px; background-color: # d0def0; position: absolute; padding: 2px; margin: 5px; display: none ;}. content {height: 150px; background-color: # FFF; font-size: 14px; overflow: auto ;}. title {padding: 2px; color: # 0CF; font-size: 14px ;}. title img {float: right ;} </style> </pead> <body> <input type = "button" value = "center window" id = "btn_center"/> <input type = "button" value = "lower left corner" id = "btn_left"/> <input type = "button" value = "lower right corner" id = "btn_right"/> Home of foot-center window www.jb51.net home of foot-Left window www.jb51.net foothome-Right window: www.jb51.net </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Author: cnblogs jihua
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
