jQuery 来自另一个页面的 Bootstrap Modal
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23801446/
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
Bootstrap Modal from another page
提问by Jimmy Lin
I've met some problems when I try to use Bootstrap Modalin my code.
当我尝试Bootstrap Modal在我的代码中使用时遇到了一些问题。
HTML:
HTML：
<a href="http://another.page" data-toggle="modal">Another Page</a>
or
或者
<a href="http://another.page" data-toggle="modal" data-target="#myModal">Another Page</a>
I'd like to modal another.pageto my page, but it doesn't work.
我想模态another.page到我的页面，但它不起作用。
the another.pageis looks like:
该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>
I don't want to load the another.pageas a <div>in my code, because there are too many place that I need to use modal.
我不想在我的代码中加载another.pageas a <div>，因为我需要使用模态的地方太多了。
Did I missed something important?
我错过了什么重要的事情吗？
Thank you very much.
非常感谢。
采纳答案by Christian Gollhardt
Make use of the element iframe
使用元素 iframe
<div class="modal-body">
<iframe src="another.page" />
</div>
And maybe you want to style it
也许你想设计它
.modal iframe {
width: 100%;
height: 100%;
}
Just to be clear, that you read the manual, based on your comments:
需要明确的是，您根据您的评论阅读了手册：
Look at the data-targetattribute of your link: It is an anchor to the HTML ElementModal 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.
查看data-target链接的属性：它是HTML ElementModal Window. 你需要这个让 Boostrap 显示和隐藏窗口。你不应该把它链接到你的页面。您需要将其链接到您的 Modal！在 Modal Body 中，您使用 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>
Alternative
选择
Homework for you:
给你的家庭作业：
- 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.
- 为每个链接
data-iframemodal属性提供一个 Iframe。 - 为每个具有
data-iframemodel以下属性的属性设置一个 Clickhandler ：- 通过 JS 打开一个新的 Modal。http://getbootstrap.com/javascript/
- 使用 iframe 设置内容，并从事件中提取发件人 href 属性作为源。
回答by burunoh
Do you want from the page 1 open the page 2 and than open the modal inside this second page? if yes, here is a solution:
您想从第 1 页打开第 2 页，然后在第二页中打开模态吗？如果是，这里有一个解决方案：
At the first page you'll use:
在第一页，您将使用：
<a href="second.html#myModal" class="btn btn-primary"> Open Modal </a>
At the second page you'll insert your modal and the follow script:
在第二页，您将插入模态和以下脚本：
(function() {
'use strict';
function remoteModal(idModal) {
var vm = this;
vm.modal = $(idModal);
if (vm.modal.length == 0) {
return false;
}
if (window.location.hash == idModal) {
openModal();
}
var services = {
open: openModal,
close: closeModal
};
return services;
// method to open modal
function openModal() {
vm.modal.modal('show');
}
// method to close modal
function closeModal() {
vm.modal.modal('hide');
}
}
Window.prototype.remoteModal = remoteModal;
})();
$(function() {
window.remoteModal('#myModal');
});
回答by Ramadhianto Handiprimastono
Make use of the element div
使用元素 div
<div class="modal-body">
<div id="modal-isi-body"></div>
</div>
and make script
并制作脚本
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
load_page('http://another.page');
});
});
function load_page(url){
$('#modal-isi-body').load(url,function(){});
}
</script>
and change
和改变
<a href="#" id="myBtn">Another Page</a>
this is other solution good luck
这是其他解决方案祝你好运
