javascript - 如何将 jquery ui 对话框定位在具有多个 iframe 的屏幕中心..?

标签 javascript jquery html css iframe

我有一个主页,里面有 4 个 iframe。

主页.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..

自定义 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>

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

最佳答案

不幸的是,您无法从 <iframe> 与主文档进行交互 由于安全政策。 这意味着您不能显示 <iframe> 之外的任何内容。通过从中触发事件。

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

希望这个回答对你有帮助

关于javascript - 如何将 jquery ui 对话框定位在具有多个 iframe 的屏幕中心..?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42413293/

相关文章:

javascript - Bootstrap 下拉右对齐失败

jquery - 如何为 jqGrid 高度属性 setGridHeight 应用 css 类?

html - td 的宽度被忽略

javascript - Promise是一种实现异步编程的技术吗?

javascript - 使用 map() 调用数组中对象的方法

javascript - Angularjs 单元测试和 httpbackend 超时

javascript - 如何从 json 中删除\r?

javascript - JQuery 比较类名

php - 某些浏览器在提交表单时不会更新隐藏的输入

javascript - 菜单项未正确显示为大型菜单