Question

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

jquery对话框的当前问题是弹出窗口关闭，弹出的html生成停留在页面上。如果您打开相同的弹出窗口五次，则所有这些弹出窗口都会保留在html中，直到您重新加载页面为止。

那么如何实现这些目标呢？

Answer 1

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

这些是您动态创建对话框的方法。你应该使用＆＃39; destroy＆＃39;关闭时。希望这会有所帮助。

Answer 2

<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。每次打开对话框时都要检查变量，如果是，则创建对话框，否则只需打开它。

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

如何动态创建iframe的jquery对话框？

2 个答案: