从外部链接自动打开引导模式答案

【问题标题】：Open a Bootstrap Modal automatically from an external link从外部链接自动打开引导模式
【发布时间】：2018-03-20 12:36:29
【问题描述】：

我有一个附有 4-5 种不同模式的页面。每个都有一个唯一的#value (obv)。我正在尝试找到一种方法从外部源（在本例中为 HTML 电子邮件）链接到这些单独的模式。

例如：

电子邮件中的“单击此处查看路线”需要链接到-->> www.myurl.com/#directions

#directions 部分应在页面加载时触发 : 功能并自动打开模式。

这是可能的还是我只是在做梦？

【问题讨论】：

有可能，但通过获取参数更容易做到：http://www.myurl.com/index.php?direction=thisway。

标签： jquery html twitter-bootstrap modal-dialog

【解决方案1】：

您可以使用 hastag 来决定要显示的内容。例如，

$(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">&times;</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 -->

这将显示选项 1 的内容

http://jsfiddle.net/fFcS2/show/#option1

这将显示选项 2 的内容

http://jsfiddle.net/fFcS2/show/#option2

代码

http://jsfiddle.net/fFcS2

【讨论】：

【解决方案2】：

很抱歉延迟回来...您的解决方案 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>

【讨论】：

【解决方案3】：

如果有人来这里寻找动态解决方案（您不必预先定义模态 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 中找到 hash 后的 id，然后显示对应 id 的 modal。

【讨论】：

这很好用，除非您还需要在同一页面内跳转，但不适用于外部链接。如果任何内部 href 破坏了其他 jquery 插件，如缓动/平滑滚动、哇等等。