关闭jQuery UI的对话框中单击

我想结束我的模态，当人们点击重叠，通常ü会使用关闭jQuery UI的对话框中单击

jQuery('.ui-widget-overlay').bind('click', function() { 
      jQuery('#dialog').dialog('close'); 
     })

，但我装我的模式后，我创建它，所以它似乎是，上面的代码以某种方式干扰了我的行为。这是我的代码到目前为止。

var dialog = $(".dialog").dialog({ 
 
     autoOpen: false, 
 
     closeText: "", 
 
     width: 'auto', 
 
     modal: true, 
 
     position: { my: "center top", at: "center top+30", of: "body" }, 
 
     show: { 
 
      effect: 'fade', 
 
      duration: 250, 
 

 
     }, 
 
     hide: { 
 
      effect: 'fade', 
 
      duration: 250 
 
     }, 
 
     
 
    }); 
 

 
    $(".currentDay").click(function() { 
 
     var id = event.target.id; 
 
     var url = '/Home/CalenderPartial/' + id; 
 

 
     dialog.load(url, function() { 
 
      dialog.dialog("open"); 
 

 
     }); 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

来源

2016-09-28 Bjørn Henneberg

检查jQuery的文件，似乎它不是渲染 – Bharat

页面上的模态工作正常，它100％是什么它打算做的唯一的事情IM缺少的就是关闭功能。 –

您可以将事件绑定open方法

var dialog = $(".dialog").dialog({ 
    autoOpen: false, 
    closeText: "", 
    width: 'auto', 
    modal: true, 
    open: function(event, ui) { //added here 
    jQuery('.ui-widget-overlay').on('click', function() { 
     jQuery('#dialog').dialog('close'); 
    }); 
    }, 
    position: { 
    my: "center top", 
    at: "center top+30", 
    of: "body" 
    }, 
    show: { 
    effect: 'fade', 
    duration: 250, 

    }, 
    hide: { 
    effect: 'fade', 
    duration: 250 
    }, 

});

来源

2016-09-28 12:12:45 brk

是的，这是我在其他一些帖子上阅读，但我会在哪里放？ –

对不起，我没有得到当你说**我在哪里可以把** – brk

在上面的代码中我会把这个打开：function（）？我试着在几个地方输入它，它只是打破了我的模式。 –

好吧，我发现这个问题里面。我正在尝试关闭对话框，然后它被初始化。

var dialog = $(".dialog").dialog({ 
 
     autoOpen: false, 
 
     closeText: "", 
 
     width: 'auto', 
 
     modal: true, 
 
     position: { my: "center top", at: "center top+30", of: "body" }, 
 
     show: { 
 
      effect: 'fade', 
 
      duration: 250, 
 

 
     }, 
 
     hide: { 
 
      effect: 'fade', 
 
      duration: 250 
 
     }, 
 
     open: function() { 
 
      jQuery('.ui-widget-overlay').on('click', function() { 
 
       dialog.dialog('close'); 
 
      }); 
 
     }, 
 
    }); 
 

 
    $(".currentDay").click(function() { 
 
     var id = event.target.id; 
 
     var url = '/Home/CalenderPartial/' + id; 
 

 
     dialog.load(url, function() { 
 
      dialog.dialog("open"); 
 

 
     }); 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这是我最终的代码，而这按预期工作。

所以总结一下，把这段代码放到你的dialog init里面。

open: function() { 
     jQuery('.ui-widget-overlay').on('click', function() { 
      jQuery('#dialog').dialog('close'); 
     })

来源

2016-09-28 12:21:27

关闭jQuery UI的对话框中单击

回答

相关问题