twitter-bootstrap 从外部链接自动打开 Bootstrap Modal
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19874795/
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 automatically from an external link
提问by stankobrin
I have a page with 4-5 different modals attached to it. Each with a unique #value (obv). I am trying to find a way to link to these individual modals' from an external source (in this case an HTML email).
我有一个附有 4-5 个不同模态的页面。每个都有唯一的#value (obv)。我试图找到一种方法来从外部源（在本例中为 HTML 电子邮件）链接到这些单独的模态。
For example:
例如：
"Click here to view directions" in the email needs to link to -->> www.myurl.com/#directions
电子邮件中的“单击此处查看路线”需要链接到-->> www.myurl.com/#directions
the #directions piece should trigger the : function on page load and have the modal automatically open.
#directions 部分应该在页面加载时触发 : 功能并自动打开模态。
Is this possible or am i only dreaming?
这是可能的还是我只是在做梦？
回答by melc
You can use the hastag to decide the content to show. For example,
您可以使用 hastag 来决定要显示的内容。例如，
JS
JS
$(document).ready(function () {
var target = document.location.hash.replace("#", "");
if (target.length) {
if(target=="option1"){
showModal("title1","content1");
}
else if(target=="option2"){
showModal("title2","content2");
}
}else{
showModal("no title","no content");
}
function showModal(title,content){
$('#myModal .modal-title').html(title);
$('#myModal .modal-body').html(content);
$('#myModal').modal('show');
}
});
HTML - Bootstrap modal code
HTML - Bootstrap 模式代码
<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">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
this will show content for option1
这将显示选项 1 的内容
http://jsfiddle.net/fFcS2/show/#option1
http://jsfiddle.net/fFcS2/show/#option1
this will show content for option2
这将显示选项 2 的内容
http://jsfiddle.net/fFcS2/show/#option2
http://jsfiddle.net/fFcS2/show/#option2
the code
代码
回答by stankobrin
Sorry for the delay in coming back... your solution worked 100%. Just as I already had multiple modals, i modified the code like this:
很抱歉延迟回来……您的解决方案 100% 有效。就像我已经有多个模态一样，我修改了这样的代码：
<script type="text/javascript">
jQuery(document).ready(function($) {
var target = document.location.hash.replace("#", "");
if (target.length) {
if(target=="modal1link"){
$('#modal1').modal('show');
}
else if(target=="modal2link"){
$('#modal2').modal('show');
}
else if(target=="modal3link"){
$('#modal3').modal('show');
}
}else{
}
});
</script>
回答by stackingjasoncooper
If anyone comes here looking for a dynamic solution (where you don't have to pre-define modal ids), here you go:
如果有人来这里寻找动态解决方案（您不必预先定义模态 ID），请访问：
$(document).ready(function() {
var url = window.location.href;
var modalToOpen = url.substring(url.indexOf("#"));
if(window.location.href.indexOf(modalToOpen) != -1) {
$(modalToOpen).modal("show");
}
});
This script grabs the current URL, finds the id after the hash in the URL, and then shows the modal with corresponding id.
这个脚本抓取当前的 URL，在 URL 中找到 hash 后的 id，然后显示对应 id 的 modal。
