Diy js pop-up layer dialog box pop-up page pop-up window plug-in

Today, we want to share a jquery1.6-based plug-in named lyz. layer1.0, which can display excellent user experience on the browser interface. It can be configured with different attributes to implement diverse functions, including: pop-up dialog box, pop-up layer, pop-up window, pop-up HTML code, and so on.

The detailed JS call code is as follows:

$ (Function () {<br/> $ ("# btnalert "). click (function () {<br/> // The normal dialog box is displayed. <br/> $. alert ({<br/> MSG: "This is the call $. alert pop-up information "<br/>}); <br/>$ (" # btnright "). click (function () {<br/> // The success dialog box is displayed. <br/> $. right (); <br/>}); <br/> $ ("# btnerror "). click (function () {<br/> // The error dialog box is displayed. <br/> $. error (); <br/>}); <br/> $ ("# btnconfirm "). click (function () {<br/> // the query dialog box is displayed. <br/> $. confirm ({<br/> callback: Function (result) {<br/> If (result) {<br/> alert ("You selected/" OK /""); <br/>}< br/> else {<br/> alert ("you have selected/" cancel /""); <br/>}< br/>}); <br/>$ ("# btncontainer "). click (function () {<br/> // The existing layer appears <br/> $. container ({<br/> targetid: "# div1", <br/> width: 300, <br/> Height: 200 <br/> }); <br/>}); <br/> $ ("# btnframe "). click (function () {<br/> // The page is displayed <br/> $. frame ({<br/> pageurl: "Http://www.baidu.com/", <br/> width: 700, <br/> Height: 500 <br/>}); <br/> }); <br/> $ ("# btncustom "). click (function () {<br/> // pop up custom HTML <br/> $. custom ({<br/> content: "<Div style =" text-align: center; "mce_style =" text-align: center; "> Hello lyz! </Div> ", <br/> width: 150, <br/> Height: 100 <br/>}); <br/> }); <br/> });

 

Detailed attribute description:

Example	Simplest call	Remarks
Prompt information	$. Alert ({MSG: "This is the call $. Alert pop-up information "});	Private attributes: MSG (optional) and callback (optional)
Successful Information	$. Right ();	Private attributes: MSG (optional) and callback (optional)
Error Message	$. Error ();	Private attributes: MSG (optional) and callback (optional)
Query Information	$. Confirm ({callback: function (result) {If (result) {alert ("You selected/" OK /"");} else {alert ("You selected/" cancel /"");}}});	Private attributes: MSG (optional) and callback (optional)
Normal bullet Layer	$. Container ({targetid: "# div1", width: 300, height: 200 });	Private property: targetid (required)
IFRAME pop-up window	$. Frame ({pageurl: "http://www.baidu.com/", width: 700, height: 500 });	Private property: pageurl (required)
Custom pop-up	$. Custom ({content: "<Div style = 'text-align: center; '> Hello lyz! </Div> ", width: 150, height: 100 });	Custom call

 

Basic parameters	Description
Icon	Pop-up title icon (icon path)
Title	Pop-up title text
Width	Width of the pop-up layer (default: 0)
Height	Height of the pop-up layer (default: 0)
Style parameters
Background	Mask Layer background color (default: #000 (black ))
Opacity	Transparency (0: completely transparent; 1: opaque; default: 0.5)
Duration	A string ("slow", "normal", or "fast") with one of the three predefined fade-in speeds, or a millisecond value indicating the animation duration (for example, 1000 ), (default: "normal ")
Showtitle	Whether to display the title (default: True)
Dragopacity	Transparency when drag is set to true and when the bullet layer is dragged (default: 1 (opacity ))
Action Parameters
Escclose	Yes. You cannot press "ESC" to disable it (default: true)
Masksclose	Whether the mask layer can be disabled (default: false)
Drag	Whether to drag the bullet layer (IE6 is not supported currently; default value: false)
Name
Closelayer ();	Call to close the bullet layer, which is generally used to trigger a close call in the pop-up layer (if called on the page in $. Frame (), window. Parent. closelayer ();)

 

Instance: http://download.csdn.net/source/3389694