Question

我正在使用JQuery UI dialog进行模态弹出窗口。我的页面中也有一些iframes。我从iframe打开模态对话框，但它将在iframe中打开。

我希望当模型弹出窗口打开时，用户无法单击后台链接。

所以请告诉我如何prevent user to click on background area？

Answer 1

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

祝你好运。

Answer 2

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

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

参考JqueryUI

中的基本模型弹出窗口

Answer 3

DEmo Here Its Solution

对我有用的一件事就是在你的对话框div中有一个iframe，并在open事件上设置它的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;
}

如何在iframe上打开JQuery模式弹出对话框？

3 个答案: