Jquery pop-up layer plug-in, very easy to use and beautiful Lee dialog 1.0

 

Title

The HTML of the pop-up layer is as follows:

 <Div id = "floatboxbg"> </div>
<Div id = "floatbox" class = "floatbox">
<Div class = "title"> <H4> title </H4> <span> close </span> </div>
<Div class = "content"> content </div></div>

The default CSS style is as follows:#floatBoxBg{width:100%;height:100%;background:#000;filter:alpha(opacity=50);opacity:0.5;position:absolute;top:0;left:0;}
.floatBox{border:#666 5px solid;width:300px;position:absolute;top:50px;left:40%;}
.floatBox .title{height:23px;padding:7px 10px 0;background:#333;color:#fff;}
.floatBox .title h4{float:left;padding:0;margin:0;font-size:14px;line-height:16px;}
.floatBox .title span{float:right;cursor:pointer;}
.floatBox .content{padding:20px 15px;background:#fff;}


 

 

Parameters:

Sequence	Parameters	Function	Remarks
1	Title	Title of the pop-up layer	Required, plain text
2	Content	Content of the pop-up layer	: URL	Get or post the HTML of a page. The page must contain only the sub-tags of the body.
			: Text	Write content directly
			: ID	Show the sub-tag of an ID on the page
			: IFRAME	Content in the layer is displayed as a frame
3	Width	Pop-up Layer Width	Required, CSS value, such as "200px"
4	Height	Height of the pop-up layer	As shown above, but "Auto" is available"
5	Cssname	CSS of the pop-up layer	Name of the style added to ID floatbox. You can customize the style name in the layer.

 

Related downloads:

Download the latest jquery version
Download the Lee dialog plugin
Download the default CSS and modify it as needed.

Application:

Dialog (title, content, width, height, cssname );

Demo:

1. Post submission form return information$ ("# Form1"). Submit (function (){
   VaR STR = escape ($ ("# Str"). Val ());
   Dialog ("My title", "url: Post? Test. asp? STR = "+ STR +" "," 200px "," Auto "," from ");
   Return false;
   });

   Get A. html file (or. php/. asp? Id = 4)Dialog ("My title", "test.html", "200px", "Auto", "text"); try

2. The plain text content is displayed.Dialog ("My title", "text: My content", "200px", "Auto", "text ");
   Try
3. The HTML in an ID is displayed.<Div id = "testid" style = "display: none;"> <H2> Lee dialog </H2> </div>
   Dialog ("My title", "ID: testid", "300px", "Auto", "ID"); try
   Lee Dialog
4. Load a page as shown in the frameLoad blueidea and define CSS: body. IFRAME. Content {padding: 0;} to overwrite it, Because. Content defaults to padding: 20px;
   Dialog ("blueidea", "iframe: http://www.blueidea.com", "500px", "500px", "iframe ");
   Try

 

Original address http://www.okajax.com/demo/dialog/