不管滚动位置如何，iframe顶部的自举模式都可以.如何在屏幕上放置它? [英] Bootstrap modal at top of iframe regardless of scroll position. How do I position it on screen?
问题描述
将Bootstrap应用程序嵌入iframe时，模态对话框始终在iframe的顶部而不是屏幕的顶部打开.例如，转到 http://getbootstrap.com/javascript/并在页面上打开示例模式.然后使用下面的示例代码将相同的引导页面放入iframe中，找到一个模式并将其打开:
When embedding a Bootstrap app in an iframe, modal dialogs always open at the top of the iframe, not the top of the screen. As an example, go to http://getbootstrap.com/javascript/ and open an example modal on the page. Then using the sample code below which places the same bootstrap page in an iframe, find a modal and open it:
<html>
<head>
</head>
<body>
<table width="100%">
<tr><td colspan="2" style="height:80px;background-color:red;vertical-align:top">Here's some header content I don't control</td></tr>
<tr><td style="width:230px;height:10080px;background-color:red;vertical-align:top">Here's some sidebar content I don't control either</td>
<td valign="top">
<iframe width="100%" height="10000px"
scrolling="no" src="http://getbootstrap.com/javascript/">
</iframe>
</td>
</tr>
</table>
</body>
</html>
在这种情况下，如何在屏幕上定位模态?
How do I go about positioning the modal on the screen in this scenario?
更新:不幸的是，我的iFrame无法填满屏幕，也无法对其进行修复，因为它需要融合到页面的其余部分中，并且页面本身具有足够的内容来滚动.这不是我的设计，我最终打算重新设计整个过程，但这是我现在必须解决的问题.作为一个临时选项，我使用javascript告诉iframe父级滚动到弹出模式对话框的顶部.尽管这是可以接受的，但这不是期望的行为.
UPDATE: Unfortunately, my iFrame cannot fill the screen, nor can I make it fixed since it needs to blend into the rest of the page and the page itself has enough content to scroll. This is not my design and I ultimately intend to rework the whole thing, but this is what I have to work around for now. As a temporary option, I'm using javascript to tell the iframe parent to scroll to the top where the modal dialog pops up. While this is acceptable, this isn't the desired behavior.
我在我的代码中使用了angularjs和ui-bootstrap库，但是正如您在上面看到的那样，这是一个引导问题.
I'm using angularjs and the ui-bootstrap library in my code but as you can see above, it's a bootstrap issue.
推荐答案
If your iframe has the same document.domain as the parent window or it is a sub domain, you can use the code below inside the iframe:
$('#myModal').on('show.bs.modal', function (e) {
if (window.top.document.querySelector('iframe')) {
$('#myModal').css('top', window.top.scrollY); //set modal position
}
});
show.bs.modal 将在您调用$('#myModal').show()之后触发 window.top.scrollY 将从父窗口获取scrollY位置
show.bs.modal will fire after you call $('#myModal').show() window.top.scrollY will get the scrollY position from the parent window
如果您的document.domain与父目录不同，则可以对其进行破解，以使其在iframe中处于onmousedown位置.例如:
In case your document.domain differs from the parent, you can hack it getting the onmousedown position inside the iframe. For example:
$('#htmlElement').on('mousedown', function (event) {
event.preventDefault();
$('#myModal').data('y', event.pageY); // store the mouseY position
$('#myModal').modal('show');
});
$('#myModal').on('show.bs.modal', function (e) {
var y = $('#myModal').data('y'); // gets the mouseY position
$('#myModal').css('top', y);
});
这篇关于不管滚动位置如何，iframe顶部的自举模式都可以.如何在屏幕上放置它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
