来自另一个页面的引导模式 [英] Bootstrap Modal from another page
问题描述
当我尝试在我的代码中使用 Bootstrap Modal 时遇到了一些问题.
I've met some problems when I try to use Bootstrap Modal in my code.
HTML:
<a href="http://another.page" data-toggle="modal">Another Page</a>
或
<a href="http://another.page" data-toggle="modal" data-target="#myModal">Another Page</a>
我想将 another.page 模态到我的页面，但它不起作用.
I'd like to modal another.page to my page, but it doesn't work.
another.page 是这样的:
<html>
<body>
<div id="myModal" class="tm-modal hide fade" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<div class="tm-modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> </button>
<h6>Modal Heading</h6>
</div>
<div class="tm-modal-body">
<p>One fine body
<85>
</p>
</div>
<div class="tm-modal-footer">
<button class="tm-btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="tm-btn tm-btn-recommand">Save changes</button>
</div>
</div>
</body>
</html>
我不想在我的代码中将 another.page 作为 <div> 加载，因为我需要使用模态的地方太多了.
I don't want to load the another.page as a <div> in my code, because there are too many place that I need to use modal.
我错过了什么重要的事情吗?
Did I missed something important?
非常感谢.
推荐答案
利用元素iframe
<div class="modal-body">
<iframe src="another.page" />
</div>
也许你想给它设置样式
.modal iframe {
width: 100%;
height: 100%;
}
为了清楚起见，您已根据您的评论阅读了手册:
查看链接的 data-target 属性:它是 HTML 元素 模态窗口 的锚点.Boostrap 需要它来显示和隐藏窗口.您不应该将其链接到您的页面.您需要将其链接到您的模态！在 Modal Body 中，您使用 iframe.
Look at the data-target attribute of your link: It is an anchor to the HTML Element Modal Window. You need this for Boostrap to show and hide the window. You should not linking it to your page. You need to link it to your Modal! In the Modal Body you use the Iframe.
<!-- trigger modal -->
<a data-toggle="modal" href="#myModal">
Launch demo modal
</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<iframe src="http://stackoverflow.com/questions/23801446/bootstrap-modal-from-another-page/23801599" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
替代方案
给你的家庭作业:
- 给每个链接的
data-iframemodal属性你想拥有一个iframe. - 为每个具有
data-iframemodel的属性设置一个 Clickhandler:- 通过 JS 打开一个新的 Modal.http://getbootstrap.com/javascript/
- 使用 iframe 设置内容，并从事件中提取 senders href 属性作为源.
- Give each link
data-iframemodalAttribute you want to have a Iframe. - Set a Clickhandler for each attribute which has
data-iframemodel:- Open a new Modal via JS. http://getbootstrap.com/javascript/
- Set Content with iframe and as source you extract from the event the senders href attribute.
这篇关于来自另一个页面的引导模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
