How to use the JQuery Easyui dialog box

Let's take a look at Easyui's dialog box

JS Code:

Copy CodeThe code is as follows:
<script language= "javascript" type= "Text/javascript" >
function Open_dialog () {
$ (' #mydialog '). Show ();
$ (' #mydialog '). Dialog ({
Collapsible:true,
Minimizable:true,
Maximizable:true,
Toolbar: [{
Text: ' Add ',
Iconcls: ' Icon-add ',
Handler:function () {
Alert (' Add data ')
}
},{
Text: ' Save ',
Iconcls: ' Icon-save ',
Handler:function () {
Alert (' Save Data ')
}
}],
Buttons: [{
Text: ' Submit ',
Iconcls: ' Icon-ok ',
Handler:function () {
Alert (' submit data ');
}
}, {
Text: ' Cancel ',
Handler:function () {
$ (' #mydialog '). Dialog (' Cancel ');
}
}]
});
}
</script>

HTML code

Copy CodeThe code is as follows:
<span onclick= "Open_dialog ()" > Bullet box </span>
<div id= "Mydialog" style= "display:none;padding:5px;width:400px;height:200px;" title= "Pinball Practice" >
<input id= "Txroleid" type= "hidden" runat= "server" value= "0"/>
<label class= "Lbinfo" > Role name:</label>
<input id= "Txrolename" type= "text" class= "Easyui-validatebox" required= "true" runat= "server"/><br/>
<label class= "Lbinfo" > </label><input type= "Submit" onserverclick= "Saverole" value= "Save" runat= "server "/>
<label id= "lbmsg" runat= "Server" ></label>
</div>

to describe the specific use of window, first of all, the properties of most attributes and Windows (window) are the same property, the following list some dialog private properties:  

The toolbar on the

property name	type	Description	Default value
title	string	dialog box caption text	New Dialog
Collapsible	Boolean	define whether to show collapsible buttons	false
minimizable	Boolean	defines whether to display the Minimize button	false
maximizable	boolean	define whether to display the Maximize button	false
resizable	boolean	Define whether the dialog box can be edited size	false
toolbar	array	dialog box, each of which includes: text, ICONCLS, disabled, handler etc.	NULL
buttons	array	dialog box at the bottom of the button, each button includes: text, ICONCLS, handler etc.	NULL

Event
Dialog events and Windows (window) events are the same.

Method
In addition to "header" and "Body", the dialog function method is the same as the window (Windows)

How to use the JQuery Easyui dialog box