Jquery UI dialog the DIV layer dialog box is displayed.

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.