twitter-bootstrap 从另一个页面打开引导模式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22203177/
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
Open a bootstrap modal from another page
提问by Steve Joiner
I have a list of links that each open their own modal. Each of these modals contents display an html file. Here is a sample;
我有一个链接列表，每个链接都打开自己的模式。这些模式内容中的每一个都显示一个 html 文件。这是一个示例；
<div id="how-rtm-works" class="modal hide fade" 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">×</button>
<h1 id="myModalLabel">How Right to Manage works</h1>
</div>
<div class="modal-body" id="utility_body">
<p>One fine body…this is getting replaced with content that comes from passed-in href</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<li><a data-target="#how-rtm-works" href="modal-content/how-RTM-works.html" role="button" data-toggle="modal">How Right to Manage works</a></li>
Because there is more than one modal, each has its own ID which is referenced in the data-target.
因为有多个模态，每个模态都有自己的 ID，在数据目标中引用。
Can anyone advise me on how I would target these modals from another page, or in my case all pages as these will be linked in the website footer nav.
任何人都可以建议我如何从另一个页面定位这些模式，或者在我的情况下所有页面都将链接到网站页脚导航中。
回答by Mohamed Ali Bouhoum
Well your modals had IDs, I think you can trigger them by adding #how-rtm-works to the end of the link
for example if you have a modal called
id="My_Modal"you can make a link
<a href="your_link/#My_Modal">Link me to the modal</a>If that is your question I guess this can help you out !
好吧，你的模态有 ID，我认为你可以通过在链接的末尾添加 #how-rtm-works 来触发它们，例如，如果你有一个被调用的模态，
id="My_Modal"你可以建立一个链接
<a href="your_link/#My_Modal">Link me to the modal</a>如果这是你的问题，我想这可以帮助你出去 ！
回答by burunoh
First page you'll use:
您将使用的第一页：
<a href="second.html#myModalLabel" class="btn btn-primary"> Open Modal </a>
At the second page you'll insert your modal and the follow script:
在第二页，您将插入模态和以下脚本：
<script type='text/javascript'>
(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('#myModalLabel');
});
</script>
