Question

我想在人们点击叠加层时关闭我的模态，通常你会使用

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

但是我在创建它之后加载我的模态，所以看起来上面的代码会以某种方式干扰我的。到目前为止，这是我的代码。

＆＃13;

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");

        });

    });

＆＃13;

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

＆＃13;

Answer 1

您可以在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
  },

});

Answer 2

好的，我发现了问题。我试图在初始化之前关闭对话框。

    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 UI对话框

2 个答案: