Easyui-dialog dialog box

Effect:

HTML code:

There are class loading methods and JavaScript loading methods.

<!--class Load mode--><%--<div id="DD" class="Easyui-dialog"title="My Dialog"style="width:400px; height:200px;"Data-options="iconcls: ' Icon-save ', Resizable:true,modal:true">Dialog Content.</div>--%><!--javascript load mode--><div id ="Dia"> <divclass="Easyui-layout"Data-options ="fit:true"> <div data-options ="Region : ' Center ', height:20, title: ' title ', Fit:true,"></div> </div></div>

JavaScript code:

$ (function () {$ ('#dia'). Dialog ({title:'Dialog', Width: -, Height: -, Iconcls:'Icon-save', modal:true,//is not the suspension increment (bottom not clickable)Draggable:false,//cannot be dragged//toolbar at the toptoolbar: [{text:'Add', Iconcls:'Icon-add', Handler:function () {alert ("add! "); }}, {text:'Delete', Iconcls:'Icon-cancel', Handler:function () {alert ("Delete"); }}, {text:'Refresh', Iconcls:'Icon-reload', Handler:function () {alert ("Refresh"); }        }],        //button group at bottombuttons: [{iconcls:'Icon-add', Text:'Save', Handler:function () {alert ("Save"); }}, {iconcls:'Icon-cancel', Text:'Delete', Handler:function () {alert ("Delete! "); }        }],        //where the event is fully inherited from the panelonclose:function () {alert ("Close the window! "); }    })})

Easyui-dialog dialog box