Jquery UI dialog the DIV layer dialog box is displayed.

The DIV layer dialog box is displayed in jquery UI. The effect preview is as follows:Http://keleyi.com/keleyi/phtml/jui/dialog/index.htm

CompleteCodeTo save it to an HTML file. You can also preview the effect after opening the file:

 <!  Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  >  <  Html  Xmlns  = "Http://www.w3.org/1999/xhtml"  >  <  Head  > <  Title  > Jquery UI pop-up Div layer dialog box -- ke leyi </  Title  >  <  Link  REL  = "Stylesheet"  Href  = "Http://keleyi.com/keleyi/pmedia/jquery/ui/1.10.3/css/smoothness/jquery-ui.min.css"   />   <  Script Type  = "Text/JavaScript"  SRC  = "Http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"  > </  Script  >  <  Script  SRC  = "Http://keleyi.com/keleyi/pmedia/jquery/ui/1.10.3/js/jquery-ui-1.10.3.min.js"  Type  = "Text/JavaScript"  > </  Script >   <  Script  Type  = "Text/JavaScript"  >  Function  Keleyidialog () {$ (  "  # Dialog  "  ). Dialog ();}  </  Script >  <  Style  Type  = "Text/CSS"  >  # Dialog  {  Display  :  None  ;  }  </ Style  >  </  Head  >  <  Body  >  <  Div  Style  = "Width: 338px; Height: 100px; margin: 10px auto ;"  > <  Input  Type  = "Button"  Onclick = "Keleyidialog ()"  Value  = "Click me"   />  <  A  Href  = "Http://keleyi.com/a/bjac/5939d3b2c920ff6d.htm"  Target  = "_ Blank"  > Original </  A  >   <  A Href  = "Http://keleyi.com/keleyi/phtml/jui/dialog/1.htm"  > No animation </  A  >   <  A  Href  = "Http://keleyi.com/keleyi/phtml/jui/dialog/2.htm"  > Animation </  A  >  <  A Href  = "Http://keleyi.com/keleyi/phtml/jui/dialog/3.htm"  > Redmond </  A  >  <  A  Href  = "Http://keleyi.com/keleyi/phtml/jui/dialog/4.htm"  > Sunny </  A  >  < BR  />  Click the button to bring up the dialog box  </  Div  >  <  Div  ID  = "Dialog"  Title  = "Div layer dialog box"  >  <  P  > This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'X' icon. </  P  >  <  P  > Ke leyi: This is a pop-up Div layer dialog box that can be used to display information. You can drag and close the pop-up layer and change its size. </  P  >  </  Div  >  </  Body >  </  Html  > 

 

There are also a variety of styles to choose from, such as Eggplant or Vader. You only need to replace smoothness in the above code to get eggplant, sunny, Redmond, or Vader. Example VADER: http://keleyi.com/keleyi/phtml/jui/dialog/2.htm
SUNNY: http://keleyi.com/keleyi/phtml/jui/dialog/4.htm

Jquery UI dialog method, has a very powerful function, such as the above Code in the keleyidialog function into the following code has a different effect: http://keleyi.com/keleyi/phtml/jui/dialog/1.htm

Code:

FunctionKeleyidialog () {$ ("# Dialog"). Dialog ({resizable:False, Height:240, Width:400, Modal:True, Buttons :{"OK ":Function() {Window. Location. href= "Http://keleyi.com";},"Cancel ":Function() {$ (This). Dialog ("close");}}});}
 

View code keleyi.com

Parameters:

Resizable: whether the dialog box size can be changed (true or false)
Height: the height (240) of the dialog box)
Width: Dialog Box (400)
Modal: whether there is a mask layer (true, false). If it is true, when the dialog box is displayed, all the elements except the pop-up dialog box paper bag are covered by the mask layer and cannot be operated.
Buttons: the button is displayed in the dialog box. click the button to execute the corresponding method.
Refer:Http://keleyi.com/a/bjac/5aed2303707e30fa.htm

 

This article Reprinted from Ke leyi: http://keleyi.com/a/bjac/5939d3b2c920ff6d.htm