javascriptjqueryjquery-easyui

How to close easyui dialog when click outside?


In my project, I use easyui dialog.

I choose easyui-linkbutton to open dialog successfully.

Because it has no title, I want to close this dialog when clicking outside.

I don't know how to define.

Here is my js code:

<script>
$(document).ready(function()
{ 
   $('#dlg').window('close');
});
</script>

Here is my html code:

<div class="easyui-panel" style="padding:5px;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')" data-options="plain:true,iconCls:'icon-newfile'">addNewFile</a>
 </div>

<div  id="dlg" class="easyui-dialog"  title=""  data-options="iconCls:'icon-save'" style="width:88px;height:260px;top:160px;left:176px;padding:10px">
<label style="cursor:pointer">one</label><br />
<label style="cursor:pointer">two</label><br />
<label style="cursor:pointer">three</label>
</div>

Who can help me ?


Solution

  • try this one also and share the information if not work.write this code on document load.

    $(document).mousedown(function(e) {
                        var clicked = $(e.target);                 
                        if (clicked.is('#dlg') || clicked.parents().is('.ui-widget-content') || clicked.is('.ui-dialog')) {                     
                            return;
                        } else { 
                            $('#dlg').dialog("close");
                        }
                    });
              });