关闭jQuery UI对话框上的覆盖点击
Close jQuery UI dialog on overlay click
我想在人们点击叠加时关闭我的模态,通常你会使用
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>
您可以在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
},
});
我找到问题了。我试图在初始化对话框之前关闭它。
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>
这是我最终得到的代码,它按预期工作。
总结一下,把这段代码放到你的对话框init中。
open: function() {
jQuery('.ui-widget-overlay').on('click', function() {
jQuery('#dialog').dialog('close');
})
相关文章:
- 覆盖Jquery's函数
- 如何覆盖jQuery所选元素的“click”事件
- 如何覆盖jQuery-ui-sortable的拖动事件
- 覆盖 jquery .load() 函数 - 处理回调
- 覆盖 jQuery 的 .load 函数
- jquery.mobile 覆盖 Jquery UI 主题:
- 如何在屏幕大小更改时覆盖 jquery 滑块切换
- 如何用html5数据属性覆盖jquery插件选项
- 如何覆盖jQuery promise回调
- 如何正确覆盖jquery ui自动完成
- 内联onclick正在覆盖JQuery click()
- 当尝试使用touchOverflowEnabled覆盖jQuery Mobile默认设置时,页面加载了两次
- 移动设备上没有滚动体的全屏覆盖(jquery mobile)
- 在哪里定义悬停类/行为来覆盖jquery的主题CSS
- 如何覆盖Jquery自动完成的用户输入
- 覆盖jQuery ajax +点击进入完成功能
- 覆盖jQuery插件的设置
- 类并覆盖JQuery事件处理程序
- 如何覆盖jquery _blank
- 覆盖jQuery方法$.POST