twitter-bootstrap Twitters bootstrap 模式在它的 iframe 弹出窗口中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12954047/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitters bootstrap modal in iframe popout of it
提问by user1469734
In Twitter Bootstrap is the possibility to get out of the box Modal dialogs shown on a website. But I'm using this in a existing webapplication, that uses a lot of iframes. The problem is; if you open a TB modal inside a iframe, it shows centered inside that iframe. I want to show it modal over the current opened page. With the modal backdrop/shadown. But how..? I tried "window.parent.parent.document.*", but then the content isn't shown. example
在 Twitter Bootstrap 中，可以摆脱网站上显示的开箱即用的模态对话框。但是我在现有的 web 应用程序中使用它，它使用了很多 iframe。问题是; 如果您在 iframe 内打开 TB 模式，它会显示在该 iframe 内居中。我想在当前打开的页面上显示它。随着模态背景/阴影。但是怎么.. 我试过“window.parent.parent.document.*”，但内容没有显示。 例子
回答by tomaszbak
I use helper method to inject/update modals. It works in your iframe scenario.
我使用辅助方法来注入/更新模态。它适用于您的 iframe 场景。
In iframe:
在 iframe 中：
$(function() {
window.parent.renderModal(".my-modal-class", "My modal content");
});
The renderModal needs to be avaiable in parent page scope. Here is the code for it:
renderModal 需要在父页面范围内可用。这是它的代码：
function renderModal(selector, html, options) {
var parent = "body",
$this = $(parent).find(selector);
options = options || {};
options.width = options.width || 'auto';
if ($this.length == 0) {
var selectorArr = selector.split(".");
var $wrapper = $('<div class="modal hide fade ' + selectorArr[selectorArr.length-1] + '"></div>').append(html);
$this = $wrapper.appendTo(parent);
$this.modal();
} else {
$this.html(html).modal("show");
}
$this.css({
width: options.width,
'margin-left': function () {
return -($(this).width() / 2);
}
});
}
回答by Tim Meade
if you are using jquery it gets a little clearer.
如果您使用 jquery，它会变得更清晰一些。
On you iframe page (i have a button)
在您的 iframe 页面上（我有一个按钮）
$('#tasks-modal').click(function(){
window.parent.renderModal('#taskModal');
});
where you are passing the model id. Note: The modal code MUST be loaded on the top frame where you are calling it.
您在何处传递模型 ID。注意：模态代码必须加载在您调用它的顶部框架上。
Then in that top frame you simply have:
然后在该顶部框架中，您只需：
function renderModal(selector) {
$(selector).modal('show');
}
Works great.....
效果很好......
