另一个页面的Bootstrap Modal [英] 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 Element Modal Window的锚点.您需要使用Boostrap来显示和隐藏窗口.您不应该将其链接到您的页面.您需要将其链接到您的Modal！在模态主体中，使用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打开新的模态. http://getbootstrap.com/javascript/
- 使用iframe设置内容，并从事件发件人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.
这篇关于另一个页面的Bootstrap Modal的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
