Javascript 如何将jQueryUI对话框定位在具有多个iframe的屏幕中心。。？_Javascript_Jquery_Html_Css_Iframe

Javascript 如何将jQueryUI对话框定位在具有多个iframe的屏幕中心。。？

javascript jquery html css iframe

Javascript 如何将jQueryUI对话框定位在具有多个iframe的屏幕中心。。？,javascript,jquery,html,css,iframe,Javascript,Jquery,Html,Css,Iframe,我有一个主页，里面有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>

我有一个主页，里面有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);

}
});

$.extend（{
警报：功能（消息、标题）{
$（“”）。对话框({
按钮：{“确定”：函数（）{$（this）.dialog（“close”）；}，
关闭：函数（事件，ui）{$（this.remove（）；}，
可调整大小：false，
可拖动：错误，
标题:标题,，
莫代尔：对
}).文本（信息）；
}
});

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>


我的警觉

如何将对话框居中于屏幕中央而非页面？

不幸的是，由于安全策略，您无法从

与主文档交互。这意味着您不能通过触发事件来显示

之外的任何内容

可能不是您真正需要的

我希望这个答案能帮助您

您可以使用

父对象

从iframe调用父页面函数。在您的情况下，在MainPage.html中编写以下函数

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

函数showAlert（消息，标题）{ $.alert（msg，title）； }
然后您可以从page1.html、page2.html等调用此函数，如下所示

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

Ohh那么什么是替代方案呢？您需要重新思考您的代码。iframe真的有必要吗？你能改用Ajax函数吗？您将能够在不受安全限制的情况下，在任何地方触发您想要的任何函数。