我有一个附有 4-5 个不同模式的页面。每个都有一个唯一的#value (obv)。我正在尝试找到一种方法来从外部源(在本例中为 HTML 电子邮件)链接到这些单独的模式。
例如:
电子邮件中的“单击此处查看路线”需要链接到 -->> www.myurl.com/#directions
#directions 部分应在页面加载时触发 : 功能并自动打开模式。
这是可能的还是我只是在做梦?
我有一个附有 4-5 个不同模式的页面。每个都有一个唯一的#value (obv)。我正在尝试找到一种方法来从外部源(在本例中为 HTML 电子邮件)链接到这些单独的模式。
例如:
电子邮件中的“单击此处查看路线”需要链接到 -->> www.myurl.com/#directions
#directions 部分应在页面加载时触发 : 功能并自动打开模式。
这是可能的还是我只是在做梦?
您可以使用 hastag 来决定要显示的内容。例如,
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 - 引导模式代码
<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 -->
这将显示 option1 的内容
http://jsfiddle.net/fFcS2/show/#option1
这将显示选项 2 的内容
http://jsfiddle.net/fFcS2/show/#option2
编码
很抱歉延迟回来...您的解决方案 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>
如果有人来这里寻找动态解决方案(您不必预先定义模态 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");
}
});
此脚本抓取当前 URL,在 URL 中找到哈希后的 id,然后显示具有相应 id 的模态。