EasyUi dialog 弹框

1、打开遮罩层

modal="true"

 

2、弹框默认打开，设置关闭

closed="true"

 

3、弹框打开，关闭调用事件

$('#dlg').dialog('open')

$('#dlg').dialog('close')

4、按钮点击后有虚线：easyui.css样式表里面这句注释掉

a.l-btn .l-btn-focus {

/*outline: #0000FF dotted thin;*/

}

# 或者

.l-btn-focus {

  /*outline: #0000FF dotted thin;*/

}

5、在common.js里动态设置dialog，统一dialog

 // style  样式设置

$('.easyui-dialog').dialog({

       // title: '',            // 弹框标题

   width : 600,

   height : 400,

   // closed : true,       // 是否关闭

   // cache : false,       // 缓存

   // draggable : false,   // 拖动

   href : '',             // 嵌入页面

   //modal : false,         // 是否将窗体显示为模式化窗口

   onClose : function() {

      console.log("关闭")

   }

}).window('center');

// 功能设置

<div id="dlg" class="easyui-dialog" title="文章"

     closed="true" modal="true"

     data-options="

        buttons: [{

                text:'Cancel',

                name: 'Cancel'

            }]

    "

>



$.extend($.fn.dialog.methods, {

    bindButtonEvents: function (jq, param) {

        return jq.each(function () {

            var dialog = $(this);

            dialog.parent().on('click', '.dialog-button a', function (e) {

                var name = $(this).linkbutton('options').name;

                var method = param[name];      // 根据按钮name属性 绑定事件

                if (method) { method(dialog); }

            });

        });

    }

});

$('.easyui-dialog').dialog('bindButtonEvents', {

    Cancel: function (dialog) {    // Cancel 按钮触发事件

        $(dialog).dialog('close')

    }

});