Cha*_*phs 16 css iframe css-position twitter-bootstrap angularjs
在iframe中嵌入Bootstrap应用程序时,模式对话框始终在iframe顶部打开,而不是在屏幕顶部打开.例如,转到http://getbootstrap.com/javascript/并在页面上打开示例模式.然后使用下面的示例代码将相同的引导页面放在iframe中,找到一个模态并打开它:
<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>
在这种情况下,如何在屏幕上定位模态？
更新:不幸的是,我的iFrame无法填满屏幕,也无法修复它,因为它需要融入页面的其余部分,页面本身有足够的内容可以滚动.这不是我的设计,我最终打算重做整件事,但这是我现在必须解决的问题.作为临时选项,我使用javascript告诉iframe父级滚动到模式对话框弹出的顶部.虽然这是可以接受的,但这不是理想的行为.
我在我的代码中使用angularjs和ui-bootstrap库,但正如您在上面所看到的,这是一个引导问题.
小智 7
如果您的iframe 与父窗口具有相同的document.domain,或者它是子域,则可以使用iframe中的以下代码:
$('#myModal').on('show.bs.modal', function (e) {
if (window.top.document.querySelector('iframe')) {
$('#myModal').css('top', window.top.scrollY); //set modal position
}
});
调用$('#myModal')后show.bs.modal将触发.show() window.top.scrollY将从父窗口获取scrollY位置
如果您的document.domain与父级不同,您可以破解它在iframe中获取onmousedown位置.例如:
$('#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);
});
| 归档时间： |
|
| 查看次数： |
13641 次 |
| 最近记录： |