Home > Others

Jquery + jquery UI implementation pop-up window + mask layer + drag + resize ~!

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

<% @ Page Language = "C #" autoeventwireup = "true" codefile = "default. aspx. cs" inherits = "_ default" %>

<! 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 runat = "server">
<Title> No title page </title>
<Link type = "text/CSS" href = "CSS/UI-lightness/jquery-ui-1.7.2.custom.css" rel = "stylesheet"/>

<SCRIPT type = "text/JavaScript" src = "JS/jquery-1.3.2.min.js"> </SCRIPT>

<SCRIPT type = "text/JavaScript" src = "JS/jquery-ui-1.7.2.custom.min.js"> </SCRIPT>

<SCRIPT type = "text/JavaScript">
Function Test ()
{
Alert ("call ");
}
$ (Function (){
$ ('# Dialog'). Dialog ({
Autoopen: True, // If set to true, the dialog box is displayed automatically after the page is loaded by default. On the contrary, the hidden status is processed.
Bgiframe: True, // solves the problem that the filter layer in IE6 cannot cover the SELECT statement.
Width: 600,
Modal: True, // This is the mask effect.
Buttons :{
"OK": function (){
Test (); // call the function here
$ (This). Dialog ("close ");
},
"Cancel": function (){
$ (This). Dialog ("close ");
}
}
});

$ ('# BTN'). Click (function (){
$ ('# Dialog'). Dialog ('open ');
Return false;
});
});
</SCRIPT>

</Head>
<Body>
<Form ID = "form1" runat = "server">
<Div class = "Demo">
<Div>
<Input type = "button" id = "BTN" value = "Click me"/>
<Div>
<Div id = "dialog" Title = "" style = "">
<P>
You waste </P>
</Div>
</Div>
</Div>
</Div>
</Form>
</Body>
</Html>

 

 

Note:

1. You do not need to add the onclick Method to the button to add all functions to $ (function.

2. Three files need to be introduced, including two JS files and one CSS file.

 

Jquery UI dialog usage Overview

 

Overview
A floating window contains the title and content. You can move, resize, and close the icon '× '.
If the content length exceeds the display in the dialog box content area, the scroll bar is displayed automatically.
In addition, there are some common options, such as adding a button bar at the bottom and a screen in the mode window.
Official example: http://jqueryui.com/demos/dialog/

· Parameter (Name: parameter type: default value)
Autoopen: Boolean: True
If this parameter is set to true, a dialog box is displayed automatically after the page is loaded by default. On the contrary, the hidden status is processed.
Initial: $ ('. selector'). Dialog ({autoopen: false });
Obtain: var autoopen = $ ('. selector'). Dialog ('option', 'autoopen ');
Settings: $ ('. selector'). Dialog ('option', 'autoopen', false );

Bgiframe: Boolean: false
If it is set to true, the bgiframe plug-in is called to fix the issue that cannot be displayed on other controls (select, flash) in IE6.
Initial: $ ('. selector'). Dialog ({bgiframe: true });
Get: var bgiframe = $ ('. selector'). Dialog ('option', 'bgiframe ');
Settings: $ ('. selector'). Dialog ('option', 'bgiframe', true );

Buttons: Object :{}
Add buttons and processing functions for the dialog box.
Initial: $ ('. selector '). dialog ({buttons: {"OK": function () {$ (this ). dialog ("close ");}}});
Get: var buttons = $ ('. selector'). Dialog ('option', 'buttons ');
Set: $ ('. selector '). dialog ('option', 'buttons', {"OK": function () {$ (this ). dialog ("close ");}});

Closeonescape: Boolean: True
Set whether to close the dialog box by pressing ESC when the dialog box is opened.
Initial: $ ('. selector'). Dialog ({closeonescape: false });
Get: var closeonescape = $ ('. selector'). Dialog ('option', 'closeonescape ');
Settings: $ ('. selector'). Dialog ('option', 'closeonescape ', false );

Dialogclass: String :''
Specifies the class name, which is displayed in the title of the dialog box.
Initial: $ ('. selector'). Dialog ({dialogclass: 'alert '});
Get: var dialogclass =$ ('. selector'). Dialog ('option', 'dialogclass ');
Settings: $ ('. selector'). Dialog ('option', 'dialogclass', 'alert ');

Draggable: Boolean: True
If this parameter is set to true, you can drag the title bar of the dialog box to move the window.
Initial: $ ('. selector'). Dialog ({draggable: false });
Get: var draggable = $ ('. selector'). Dialog ('option', 'draggable ');
Settings: $ ('. selector'). Dialog ('option', 'draggable', false );

Height: Number: 'auto'
Set the height of the dialog box (unit: pixels ).
Initial: $ ('. selector'). Dialog ({Height: 530 });
Get: var Height = $ ('. selector'). Dialog ('option', 'height ');
Settings: $ ('. selector'). Dialog ('option', 'height', 530 );

Hide: String: NULL
Disable (hide) the dialog box to add animation effects.
Initial: $ ('. selector'). Dialog ({hide: 'slide '});
Obtain: var hide =$ ('. selector'). Dialog ('option', 'hide ');
Settings: $ ('. selector'). Dialog ('option', 'hide ', 'slide ');

Maxheight: Number: false
Set the maximum height (unit: pixels) of the dialog box ).
Initial: $ ('. selector'). Dialog ({maxheight: 400 });
Obtain: var maxheight = $ ('. selector'). Dialog ('option', 'maxheight ');
Settings: $ ('. selector'). Dialog ('option', 'maxheight', 400 );

Maxwidth: Number: false
Set the maximum width (unit: pixels) of the dialog box ).
Initial: $ ('. selector'). Dialog ({maxwidth: 600 });
Obtain: var maxwidth = $ ('. selector'). Dialog ('option', 'maxwidth ');
Settings: $ ('. selector'). Dialog ('option', 'maxwidth', 600 );

Minheight: Number: 150
Set the minimum height (unit: pixels) of the dialog box ).
Initial: $ ('. selector'). Dialog ({minheight: 300 });
Get: var minheight = $ ('. selector'). Dialog ('option', 'minheight ');
Settings: $ ('. selector'). Dialog ('option', 'minheight', 300 );

Minwidth: Number: 150
Set the minimum width (unit: pixels) of the dialog box ).
Initial: $ ('. selector'). Dialog ({minwidth: 400 });
Get: var minwidth = $ ('. selector'). Dialog ('option', 'minwidth ');
Settings: $ ('. selector'). Dialog ('option', 'width', 400 );

Modal: Boolean: false
Whether the window is a mode window. If this parameter is set to true, a screen is created before all elements on the page.
Initial: $ ('. selector'). Dialog ({modal: true });
Get: var modal =$ ('. selector'). Dialog ('option', 'modal ');
Settings: $ ('. selector'). Dialog ('option', 'modal', true );

Position: String, array: 'center'
Set the initial display position of the dialog box. Optional values: 'center', 'left', 'right', 'top', 'bottom ', or an array ['right', 'top']
Initial: $ ('. selector'). Dialog ({position: 'top '});
Get: var position = $ ('. selector'). Dialog ('option', 'position ');
Settings: $ ('. selector'). Dialog ('option', 'position', 'top ');

Resizable: Boolean: True
Set whether the dialog box can be adjusted.
Initial: $ ('. selector'). Dialog ({resizable: false });
Get: var resizable = $ ('. selector'). Dialog ('option', 'resizable ');
Settings: $ ('. selector'). Dialog ('option', 'resizable', false );

Show: String: NULL
Used to display the dialog box.
Initial: $ ('. selector'). Dialog ({Show: 'slide '});
Get: var show = $ ('. selector'). Dialog ('option', 'show ');
Settings: $ ('. selector'). Dialog ('option', 'show ', 'slide ');

STACK: Boolean: True
Set whether to move the dialog box before other dialog boxes.
Initial: $ ('. selector'). Dialog ({Stack: false });
Get: var stack = $ ('. selector'). Dialog ('option', 'stack ');
Settings: $ ('. selector'). Dialog ('option', 'stack', false );

Title: String :''
Specify the title of the dialog box. You can also set the title in the title attribute of the additional element in the dialog box.
Initial: $ ('. selector'). Dialog ({Title: 'Dialog title '});
Get: var Title = $ ('. selector'). Dialog ('option', 'title ');
Settings: $ ('. selector'). Dialog ('option', 'title', 'Dialog title ');

Width: Number: 300
Set the dialog box width (unit: pixels ).
$ ('. Selector'). Dialog ({width: 460 });
Get: var width = $ ('. selector'). Dialog ('option', 'width ');
Settings: $ ('. selector'). Dialog ('option', 'width', 460 );

Zindex: INTEGER: 1000
Set the zindex value in the dialog box.
Initial: $ ('. selector'). Dialog ({zindex: 3999 });
Get: var zindex = $ ('. selector'). Dialog ('option', 'zindex ');
Settings: $ ('. selector'). Dialog ('option', 'zindex', 3999 );


· Events
Beforeclose: dialogbeforeclose
This event is triggered before the dialog box is closed. If false is returned, the dialog box is displayed.
Initial: $ ('. selector'). Dialog ({beforeclose: function (event, UI ){...}});
Binding: $ ('. selector'). BIND ('dialogbeforeclose', function (event, UI ){...});

Open: dialogopen
This event is triggered when the dialog box is opened.
Initial: $ ('. selector'). Dialog ({open: function (event, UI ){...}});
Binding: $ ('. selector'). BIND ('dialogopen', function (event, UI ){...});

Focus: dialogfocus
This event is triggered when the dialog box gets the focus.
Initial: $ ('. selector'). Dialog ({focus: function (event, UI ){...}});
Binding: $ ('. selector'). BIND ('dialogfocus ', function (event, UI ){...});

Dragstart: dragstart
This event is triggered when the drag start dialog box is moved.
Initial: $ ('. selector'). Dialog ({dragstart: function (event, UI ){...}});
Binding: $ ('. selector'). BIND ('dragstart', function (event, UI ){...});

Drag: Drag
This event is triggered when the drag and drop dialog box is moved.
Initial: $ ('. selector'). Dialog ({drag: function (event, UI ){...}});
Binding: $ ('. selector'). BIND ('drag', function (event, UI ){...});

Dragstop: dragstop
This event is triggered when the drag-and-drop dialog box action ends.
Initial: $ ('. selector'). Dialog ({dragstop: function (event, UI ){...}});
Binding: $ ('. selector'). BIND ('dragstop', function (event, UI ){...});

Resizestart: resizestart
This event is triggered when the dialog box is changed.
Initial: $ ('. selector'). Dialog ({resizestart: function (event, UI ){...}});
Binding: $ ('. selector'). BIND ('resizestart', function (event, UI ){...});

Resize: resize
This event is triggered when the dialog box size changes.
Initial: $ ('. selector'). Dialog ({resize: function (event, UI ){...}});
Binding: $ ('. selector'). BIND ('resize', function (event, UI ){...});

Resizestop: resizestop
This event is triggered when the dialog box size changes.
Initial: $ ('. selector'). Dialog ({resizestop: function (event, UI ){...}});
Binding: $ ('. selector'). BIND ('resizestop', function (event, UI ){...});

Close: dialogclose
This event is triggered when the dialog box is closed.
Initial: $ ('. selector'). Dialog ({close: function (event, UI ){...}});
Binding: $ ('. selector'). BIND ('dialogclose', function (event, UI ){...});


· Attributes
Destroy
Destroy dialog box objects.
Usage:. Dialog ('deststroy ')

Disable
Disable dialog box.
Usage:. Dialog ('disable ')

Enable
Enable dialog box.
Usage:. Dialog ('enable ')

Option
Obtain or set the properties of the dialog box.
Usage:. Dialog ('option', optionname, [value])

Close
Close the dialog box.
Usage:. Dialog ('close ')

Isopen
Determines whether the dialog box is opened.
Usage:. Dialog ('isopen ')

Movetotop
Move the dialog box to the top-level display.
Usage:. Dialog ('movetotop ')

Open
Open the dialog box.
Usage:. Dialog ('open ')

 

<SCRIPT type = "text/JavaScript">
$ (Function (){
$ ('# Dialog'). Dialog ({
Autoopen: false, // if it is set to true, the dialog box is displayed automatically after the page is loaded by default. On the contrary, the hidden status is processed.
Bgiframe: True, // solves the problem that the filter layer in IE6 cannot cover the SELECT statement.
Width: 600,
Modal: True, // This is the mask effect.
Buttons :{
"OK": function (){
$. Ajax ({
Type: "Post ",
Contenttype: "application/JSON; UTF-8 ",
URL: "default2.aspx/getdate ",
Data: "{STR:/" "+ $ (" # textbox2 "). Val () + "/"}",
Success: function (MSG ){
Alert (msg. D. successmsg );
$ ("# Textbox1"). Empty ();
$ ("# Textbox1"). Val (msg. D. successmsg );
},
Error: function (MSG ){
Alert ("error:" + MSG );
}
});
$ (This). Dialog ("close ");},
"Cancel": function (){
$ (This). Dialog ("close ");
}
}
});
$ ('# Loading'). Dialog ({
Autoopen: false, // if it is set to true, the dialog box is displayed automatically after the page is loaded by default. On the contrary, the hidden status is processed.
Bgiframe: True, // solves the problem that the filter layer in IE6 cannot cover the SELECT statement.
Width: 300,
Modal: True, // This is the mask effect.
Resizable: false,
Dialogclass: 'alert'

});

$ ('# BTN'). Click (function (){
$ ('# Dialog'). Dialog ('open ');
Return false;
});

$ ("# Btnajax"). Click (function ()
{
$. Ajax ({
Type: "Post ",
Contenttype: "application/JSON; UTF-8 ",
URL: "default2.aspx/getdate ",
Data: "{STR:/" "+ $ (" # textbox1 "). Val () + "/"}",
Success: function (MSG ){
Alert (msg. D. successmsg );
},
Error: function (MSG ){
Alert ("error:" + MSG );
}
});
});

// Ajax monitoring is a global Diable ('disable ')
$ (Document). Ready (function (){
$ ('# Loading'). ajaxstart (function (){
$ (This). Dialog ('open ');
}). Ajaxstop (function (){
$ (This). Dialog ('close ');
});
});
});

</SCRIPT>

</Head>
<Body>
<Form ID = "form1" runat = "server">
<Div class = "Demo">
<Div>
<Input type = "button" id = "BTN" value = "Click me"/>
<Div>
<Div id = "dialog" Title = "">
<P>
Here is the content! </P> <asp: textbox id = "textbox2" runat = "server"> </ASP: textbox>
</Div>
</Div>
</Div>
</Div>
<Input type = "button" value = "ajax get" id = "btnajax"/>
<Span id = "DT"> </span>
<Div id = "tdiv">
</Div>
<Asp: textbox id = "textbox1" runat = "server"> </ASP: textbox>
<Div id = "loading" style = "border: 1px solid #808080; width: 300px; Height: 50px; display: none;">
<P>
Loading ~ </P>
</Div>
</Form>

 

[Webmethod]
Public static callbackmessage getdate (string Str)
{
Callbackmessage MSG = new callbackmessage ();
MSG. issuccess = true;
MSG. successmsg = "successful! "+ STR;
Return MSG;
}

 

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
jquery resize image proportionally jquery mask money jquery tree drag and drop jquery popup window jquery ui cdn link jquery ui cdn google jquery ui flat theme

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More