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

how to open JQuery model popup dialog over iframe?

本文关键字：模型 JQuery 对话框 iframe      更新时间：2023-09-26

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

我想当模型弹出窗口打开时，用户不能允许点击后台链接。

所以请让我知道如何才能prevent user to click on background area？

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

祝你好运。

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

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

请参阅JqueryUI 中的基本模型弹出菜单

DEmo在这里它的解决方案

对我有用的一件事是在作为对话框的div中有一个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;
}
相关文章：