Question

我有一个按钮，当用户点击时，会弹出带有iframe的对话框，该iframe会加载详细信息页面（见下文）。我可以在右上角的X按钮上关闭此弹出窗口，但是当用户在弹出框外单击时，我也想关闭此弹出窗口。

我看到jQuery代码可以在用户点击外部时关闭DIV，但DIV必须在正文页面中是静态的。我的OpenIframe功能代码是用户点击动态创建DIV，所以当用户点击外面时我不知道如何关闭它。

我的jQuery代码用iFrame打开对话框。

function OpenIframe(url, recordId, width, height, event, pagetitle) {
    if (event.preventDefault)
        event.preventDefault();
    else
        event.returnValue = false;

    var page = url + "?" + recordId + "=" + encodeURIComponent($('span[id$="' + recordId + '"]').text());
    //alert(page);
    //var pagetitle = $(this).attr("title");
    var $dialog = $('<div id="dialog"  style="text-align:center;"></div>') 
    .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"  frameBorder="0"   align="center"> </iframe>')
    .dialog({
        autoOpen: false,
        modal: true,
        height: height,
        width: width,
        title: pagetitle
    });
    $dialog.dialog('open');
}

我看到人们使用下面的代码在用户点击外部时关闭弹出窗口，但只有当DIV静态放入页面正文时才会生效。

jQuery(document).ready(function() {
        jQuery("#dialog").dialog({
            bgiframe: true,
            autoOpen: false,
            height: 100,
            modal: true,
            open: function(){
                jQuery('.ui-widget-overlay').bind('click',function(){
                    jQuery('#dialog').dialog('close');
                })
            }
        });
    });

如果可能，请帮我修改代码以使其有效？

谢谢！

Answer 1

以下是解决方案：

http://jsfiddle.net/thecbuilder/Ltcuqpkz/5/

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

在open回调中添加此内容以关闭您的模态。

同时添加

<div id="dialog"  style="text-align:center;"></div>

仅在body中

。您一次又一次地添加相同的id div。

如果不想在div中添加body，那么在关闭dialog时.remove() div。

完成 js

jQuery(document).ready(function () {
    $("#showD").click(function () {
        OpenIframe("test");
    });
});

function OpenIframe(pagetitle) {
    var $dialog = jQuery('#dialog')
        .html('Here goes iFrame')
        .dialog({
        autoOpen: false,
        modal: true,
        height: 100,
        width: 100,
        title: pagetitle,
        open: function (a, b) {
            jQuery('body').on('click', '.ui-widget-overlay', function () {
                $('#dialog').dialog('destroy');
            });
        }
    });
    $dialog.dialog('open');
}

Answer 2

$('.ui-widget-overlay').live('click', function() {
     $('#dialog').dialog( "close" );
});

Jquery对话框打开Iframe并在单击其他位置时关闭

2 个答案: