如何将jquery ui对话框定位在具有多个iframe的屏幕中心..？答案

【问题标题】：how to position jquery ui dialog at center of screen having mutiple iframe..?如何将jquery ui对话框定位在具有多个iframe的屏幕中心..？
【发布时间】：2017-02-23 10:37:31
【问题描述】：

我的主页里面有 4 个 iframe。

MainPage.html

<html>
<head>
<title>My alert</title>

<script src="jquery-1.12.4.js"></script>
<script src="jquery-ui.js"></script>
<script src="custom-alert.js"></script>

<link rel="stylesheet" href="jquery-ui.css">
<link rel="stylesheet" href="style.css">


</head>
<body>
  <div id="mainPage" style="text-align:center;">
  <h1>Main Page</h1>
      <input type="button" value="Trigger" onclick="$.alert('This is test msg', 'My Title');" /><br/><br/>
      <div id="page1"><iframe id="if1" src="page1.html"></iframe></div>
      <div id="page2"><iframe id="if2" src="page2.html"></iframe></div>
      <div id="page3"><iframe id="if3" src="page3.html"></iframe></div>
      <div id="page4"><iframe id="if4" src="page4.html"></iframe></div>
  </div>

</body>
</html>

我想在屏幕中心显示 jquery 对话框，而不考虑 iframe..

custom-alert.js

$.extend({ 
  alert: function (message, title) {
  $("<div></div>").dialog({
    buttons: { "Ok": function () { $(this).dialog("close"); } },
    close: function (event, ui) { $(this).remove(); },
    resizable: false,
    draggable: false,
    title: title,
    modal: true
  }).text(message);

}
});

page1.html 到 page4.html 如下

<html>
<head>
<title>My alert</title>

<!-- Include there four files as MIME Object -->
<!-- call using $.alert("message", "title") -->

<script src="jquery-1.12.4.js"></script>
<script src="jquery-ui.js"></script>
<script src="custom-alert.js"></script>

<link rel="stylesheet" href="jquery-ui.css">
<link rel="stylesheet" href="style.css">


</head>
<body>
<input type="button" value="Trigger" onclick="$.alert('This is test msg 1', 'My Title');" /><br/><br/>
</body>
</html>

如何将对话框置于屏幕中心而不是页面中心？

【问题讨论】：

标签： javascript jquery html css iframe

【解决方案1】：

很遗憾，由于安全策略，您无法通过<iframe> 与主文档进行交互。这意味着您无法通过触发事件来显示 <iframe> 之外的任何内容。

<iframe> 可能不是您真正需要的。

希望这个回答对你有帮助

【讨论】：

哦，那还有什么选择？
您需要重新考虑您的代码。 iframe 真的有必要吗？你可以使用一些 Ajax 函数来代替吗？您将能够在不受安全限制的任何地方触发您想要的任何功能。

【解决方案2】：

您可以使用parent object 从 iframe 调用父页面函数。在您的情况下，在您的 MainPage.html

中写入以下函数

<script type="text/javascript">
 function showAlert(msg,title){
   $.alert(msg,title);
 }
</script>

然后您可以从 page1.html、page2.html 等调用此函数，如下所示...

<input type="button" value="Trigger" onclick="parent.showAlert('This is test msg 1', 'My Title');" /><br/><br/>

【讨论】：