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

【问题标题】：Jquery Dialog Open Iframe and Close When Click Else WhereJquery 对话框打开 iframe 并在单击其他位置时关闭
【发布时间】：2014-08-22 18:26:45
【问题描述】：

我有一个按钮，当用户单击时，它会弹出一个带有 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');
                })
            }
        });
    });

如果可能，请帮我修改代码以使其正常工作？

谢谢！

【问题讨论】：

你可以创建一个jsFiddle吗？
这里是 jsFiddle（第一次创建它，如果我做错了请告诉我）。 jsfiddle.net/pwywhztu/7

标签： jquery

【解决方案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。

如果不想在body 中添加div，那么在关闭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');
}

【讨论】：

【解决方案2】：

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

【讨论】：