EasyUI

效果：

html代码：

其中有class加载方式和Javascript加载方式。

<!--class加载方式-->
<%--<div id="dd" class="easyui-dialog" title="My Dialog" style=" 400px; height: 200px;"
    data-options="iconCls:'icon-save',resizable:true,modal:true">
    Dialog Content.
</div>--%>

<!--JavaScript加载方式-->
<div id ="dia">
    <div class ="easyui-layout" data-options ="fit:true">
        <div data-options ="region:'center', height:20, title:'标题', fit:true,"></div>
    </div>
</div>

JavaScript代码：

$(function () {
    $('#dia').dialog({
        title:'dialog',
         400,
        height: 300,
        iconCls: 'icon-save',
        modal: true,//是不是悬浮增（底部不可点击）
        draggable: false,//不可拖动
        //顶部的工具栏
        toolbar: [{
            text:'添加',
            iconCls: 'icon-add',
            handler: function () {
                alert("add！");
            }
        }, {
            text: '删除',
            iconCls: 'icon-cancel',
            handler: function () {
                alert("delete");
            }
        }, {
            text: '刷新',
            iconCls: 'icon-reload',
            handler: function () {
                alert("refresh");
            }
        }],
        //底部的按钮组
        buttons: [{
            iconCls:'icon-add',
            text: '保存',
            handler: function () {
                alert("save");
            }
        }, {
            iconCls:'icon-cancel',
            text: '删除',
            handler: function () {
                alert("删除！");
            }
        }],
        //其中事件是完全继承自panel
        onClose: function () {
            alert("关闭了窗口！");
        }
    })
})