如何在iframe上打开jQuery模态弹出对话框？

Question

我正在使用JQuery UI对话框作为模态弹出窗口。我的页面中还有一些iframes。我从iframe打开模态对话框，但它将在iframe内部打开。

我希望当模态弹出窗口打开时，用户不能点击背景链接。

请告诉我如何防止用户点击背景区域？

- user1722447

Answer 1

iframe 是页面内的一个页面。如果您在 iframe 中加载的页面中使用对话框，则它将在 iframe 中加载。您需要做的是在主页面上添加代码以打开对话框或使用 parent 调用父页面并执行 JavaScript 代码。如果 iframe 和父页面共享同一域，那么如果它们属于不同的域，您的 iframe 就无法访问父 JavaScript，这是一个问题。解决方法是使用 postMessage。您需要在主页面中添加打开对话框的代码，并使用 postMessage 在父页面和 iframe 之间进行通信，这是所有浏览器的安全限制。

祝好运。

- Jorge Enrique Reyes Salas

Answer 2

通过设置 model : true，您可以防止用户在 JQuery 中点击背景区域。

 $(function() {
    $( "#popupId" ).dialog({
       modal: true
    });
 });

请参考JqueryUI中的基本模型弹出窗口

- RajeshKdev

Answer 3

在这里演示解决方案

对我有效的一个方法是在对话框内部设置一个 iframe，并在打开事件上设置其 URL 属性。

例如：

打开对话框，并使用以下 JS 代码：

$("#dialog").dialog({
    autoOpen: false,
    modal: true,
    height: 600,
    open: function(ev, ui){
             $('#myIframe').attr('src','http://www.jQuery.com');
          }
});

$('#dialogBtn').click(function(){
    $('#dialog').dialog('open');
});

你会发现你需要对iframe进行一些样式设置，使其看起来更好看。

#myIframe{
  height: 580px;
}

- codefreaK