Figure 1 (a div is displayed)
Figure 2 (multiple pop-up items)
Constructor:
Copy codeThe Code is as follows:
Var DivWindow = function (popup/* outermost div id */, popup_drag/* drag div id */, popup_exit/* exit button id */, exitButton/* server exit trigger button id */, varwidth, varheight, zindex ){
This. popup = popup;
This. height = varheight; // The window height, which is not used to set the window height and width. It is used to locate the position on the screen.
This. width = varwidth; // window width
This. popup_exit = popup_exit;
This. exitButton = exitButton;
This. zindex = zindex;
This. init = function () {// initialization window
This. popupShow ();
This. startDrag (); // sets the drag
This. setCommond (); // set to disable
DivWindow. ArrayW. push (document. getElementById (this. popup); // store the window to the array
}; This. init ();
};
Call:
Copy codeThe Code is as follows:
<Input type = "button" id = "show" onclick = "javascript: new DivWindow ('popup', 'popup _ drag', 'popup _ eg', 'exitbutton ', '000000', '000000', 4); "value = 'trigger the detailed basic information DIV '/>
In some cases, it may be a bit strange. Don't ask me what to ask, because I have this need. I have time to modify the mask effect. For more code, see download
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> <title> window class </ title> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <style type =" text/css ">. mask {position: absolute; top: 0px; left: 0px; filter: alpha (opacity = 50);-moz-opacity: 0.5; opacity: 0.5; background-color: # ffffff; z-index: 2; display: none;}/* Pop-up basic information div */div. sample_popup {height: auto; border: 1px solid # 327eca; width: 300px;} div. menu_form_header {background: url ('.. /images/baseInfo/titleBG.gif ') repeat-x;} div. sample_popup div. menu_form_header {border-bottom: 0px; cursor: default; width: 100%; height: 22px; line-height: 22px; vertical-align: middle; text-decoration: none; font-family: "Times New Roman", Serif; font-weight: 800; font-size: 13px; color: #206040;} div. menu_form_body {width: 100%; height: 150px; font-size: 12px; background-color: # f1f8fe;} div. sample_popup input. menu_form_exit {float: right; margin: 4px 5px 0px 0px; cursor: pointer;}/* end: the product information div */</style> </pead> <body> sffs <input type = "button" id = "show" onclick = "javascript: new DivWindow ('popup', 'popup _ drag', 'popup _ exit ', 'exitbutton', '123', '123', 4 ); "value = 'trigger basic info DIV '/> <input type =" button "id =" exitButton "value =" aaaa "/> <input type =" button "id = "popup_exit" value = "exit"/> region Data Area Name: <input type = "button" id = "Button1" onclick = "javascript: new DivWindow ('div1', 'div2', 'exit2', 'exitbutton ', '123 ', '123', 5 ); "value = 'trigger basic info. DIV2 '/> <input type =" button "id =" exit2 "value =" exit "/> area info. 2222 Area Name: yj </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Package download