如何动态地使用iframe创建jquery对话框？

Question

如何创建一个JQuery简单对话框，对话框将不在同一页的div中，而是应该在iframe中。一旦弹出窗口关闭，模型对话框也应该销毁。

当前jquery对话框的问题是，一旦弹出关闭，弹出html生成的页面将保持不变。如果您打开相同的弹出框五次，那么所有这些弹出窗口都将保留在html中，直到重新加载页面。

那么如何实现这些呢？

Answer 1

<div id="dialog"/>

var dlg = $('#dialog').html('<iframe id="ifrm"></iframe>');
dlg.dialog({
    autoOpen: true,
    close: function (event, ui) {
        $(this).dialog('destroy').remove(); // Clears the html
    }
});

但我更喜欢另一种方法。第一次打开对话框后，将变量设置为true。每次打开对话框时，检查变量，如果变量为false，则创建对话框，否则只需打开它。

var isOpen = false;
$('#someButton').on('click', function(){
  if(!isOpen){
     // Create the dialog
     isOpen = true;
  }else{
     $('#dialog').dialog('open');
   }
});

Answer 2

    var iframe = $('<div><iframe id="iframetestdialog" src=' + url + ' style="border: none;overflow-x:hidden; overflow-y:hidden;display: block;" height="100%" width="100%" marginheight="0" marginwidth="0" frameBorder="0" scrolling="no" horizontalscrolling="no" verticalscrolling="no"></iframe>');
    $dialog = iframe.dialog({
        modal: true,
        height: height,
        width: width,
        closeOnEscape: false,
        draggable: true,
        resizable: false,
        title: title
    });

这就是动态创建对话框的方法。你应该在关闭的时候使用“破坏”。希望这能有所帮助。