jQuery UI对话框：单击外部时关闭 [英] jQuery UI Dialog: Close when Click Outside

问题描述

我有一个jQuery UI对话框。我试图实施$（‘UI的小部件叠加‘）。绑定（’点击’......已经提出，当用户点击外，关闭对话框的方法。但是，这是行不通的我的代码我做错了什么？

  $（'input [name =delete-image]'）点击（function（e）{
 e.preventDefault（）; 
 $（div.deleteImageDialog）。dialog（{
 resizable：false，
 modal：true，
按钮：{
OK：function（e）{
 e.preventDefault（）; 
 $ .ajax（{
 url：$（'form.addEdit' ）.attr（'action'），
 type：$（'form.addEdit'）。attr（'method'），
 data：$（'form.addEdit'）。serialize（） 
 open：function（）{
 $（'。ui-widget-overlay'）。bind（'click'，function（）{
 $（'div.deleteImageDialog' （'关）; 
}）
}，
成功：功能（HTML）{} 
}）; 
 $（本）.dialog（关闭）; 
}，
 取消：函数（）{
 $（本）.dialog（关闭）; 
} 
} 
}）; 
 
}）; 
  

解决方案

然后您必须将事件绑定到叠加层。

  $（ '输入[名称= 删除图像]'）。点击（函数（E）{
 e.preventDefault（）; 
 $（div.deleteImageDialog）对话框（{
 //你的代码... 
取消：function（）{
 $（this）.dialog（'close'）; 
} 
} 
}）; 
 $（'。overlay_sector'）bind（'click'，function {
 $（div.deleteImageDialog）对话框（'close'）; 
 $（'。overlay_sector'）。unbind（）; 
}）
}）; 
  

I have a jQuery UI Dialog. I tried implementing the "$('.ui-widget-overlay').bind('click'...." method which has been suggested to close the dialog when a user clicks outside. However, it doesn't work in my code. What am I doing wrong?

$('input[name="delete-image"]').click(function(e){
    e.preventDefault();
    $("div.deleteImageDialog").dialog({
        resizable: false,
        modal: true,
        buttons: {
            "OK": function(e) {
                e.preventDefault();
                $.ajax({
                    url: $('form.addEdit').attr('action'),
                    type: $('form.addEdit').attr('method'),
                    data: $('form.addEdit').serialize(),
                    open: function(){
                                $('.ui-widget-overlay').bind('click', function(){
                                    $('div.deleteImageDialog').dialog('close');
                                })
                    },
                    success: function(html) { }
                });
                $(this).dialog('close');
            },
            "Cancel": function() {
                $(this).dialog('close');
            }
        }
    });

});

解决方案

Then you have to bind an event to the overlay.

$('input[name="delete-image"]').click(function(e){
    e.preventDefault();
    $("div.deleteImageDialog").dialog({
            // your code...
            "Cancel": function() {
                $(this).dialog('close');
            }
        }
    });
    $('.overlay_sector').bind( 'click', function() {
            $("div.deleteImageDialog").dialog('close');
            $('.overlay_sector').unbind();
    } )
});

这篇关于jQuery UI对话框：单击外部时关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！