easyUi创建临时Dialog

项目中遇到一个页面两个easyUi的dialog弹出层，结果只要点击了其中一个，另外一个就不能正常显示了，不知何因，除非刷新整个页面才能正常显示，为了解决这个问题，查了很多资料，终于找到一个解决方案，那就是关闭这个dialog之后将这个div进行销毁(当然也可以直接销毁)，因此不能使用传统的div弹出dialog的写法，需要改变思路，使用以下这种方式实现需要的效果，代码如下：

一、父页面easyUi的js代码，这个写法的好处是不需要再写这个div的html代码了，如：

<div id="addWorkFlowDialog" style="padding:10px;"></div>

//现在只需要如下写法即可
<script type="text/javascript">
        var addWorkFlowDialog;              /* 定义一个临时弹出层的全局对象 */  
        function newSWorkFlow() {
                addWorkFlowDialog = $("<div/>").dialog({
                        title : '新增',              /* 设置弹窗标题 */
                        iconCls : 'icon-edit',       /* 设置弹窗图标 */
                        modal : true,                /* 设置为背景页面不可操作 */
                        width : 800,                 /* 设置窗口宽度 */
                        height : 600,                /* 设置窗口高度 */
                        closed : true,
                        href : '${ctx}/system/workFlow/addView?flowId='+flowId,   /* 远程加载页面数据 */
                        onClose : function() {           /* 当这个dialog关闭之后 */    
                                $(this).dialog('destroy');   /* 销毁当前这个div */
                        }
                });
                addWorkFlowDialog.dialog("open");
        }
</script>

二、弹出层页面,关闭当前弹出层的js代码，需要使用父页面的全局对象来关闭自己

<script type="text/javascript">
        /* 关闭当前页面 */
        function closeForm(){
                addWorkFlowDialog.dialog("close");    /* 调用父页面的全局对象来关闭自己 */   
        }
</script>

转载于:https://blog.51cto.com/1197822/2157049