Bootstrap - 直接链接到模态窗口答案

【问题标题】：Bootstrap - direct link to modal windowBootstrap - 直接链接到模态窗口
【发布时间】：2014-01-06 21:13:16
【问题描述】：

是否可以有这样的网址：

www.url.com/#imprint
（或类似的）直接链接到打开模式窗口的页面？

这可能吗？有什么提示吗？
谢谢！

【问题讨论】：

是的，这是可能的。但这取决于您为什么以及如何使用链接。
我只得到了几个星期的单页，我需要从其他服务直接链接到我的印记。但我的印记在首页的模态窗口中。这就是为什么;)

标签： javascript jquery twitter-bootstrap modal-dialog twitter-bootstrap-3

【解决方案1】：

你也许可以做这样的事情。

if (window.location.hash == "#imprint") {
     $('#myModal').modal('show');
}

【讨论】：

【解决方案2】：

仅针对未来的访问者/读者，我创建了一个非常简单的函数来动态地打开模式，而无需知道您要查找的确切 ID。如果没有找到哈希，它就会失败。

/**
 * Function to open a bootstrap modal based on ID
 * @param int
 */
function directLinkModal(hash) {
  $(hash).modal('show');
}

/**
 * Call the function on window load
 * @param hash of the window
 */
directLinkModal(window.location.hash);

【讨论】：

【解决方案3】：

是的，这是可能的。只需检查网址：

function popModal() {
      // code to pop up modal dialog
    }

    var hash = window.location.hash;
    if (hash.substring(1) == 'modal1') {
      popModal();
    }

【讨论】：

【解决方案4】：

在浪费了几个小时之后，我想出了这个。根据在 page-1 处点击的链接，在 page-2 处打开不同模式的解决方案。 HTML代码基于Bootstrap官方Modal示例。

HTML | page-1.html

<body>    
  <a href="http://yourwebsi.te/page-2.html?showmodal=1">
  <a href="http://yourwebsi.te/page-2.html?showmodal=2">
</body>

JS | ShowModal.js

$(document).ready(function() {
  var url = window.location.href;
  if (url.indexOf('?showmodal=1') != -1) {
    $("#modal-1").modal('show');
  }
  if (url.indexOf('?showmodal=2') != -1) {
    $("#modal-2").modal('show');
  }
});

HTML | page-2.html

<body>    
  <div class="modal fade bd-example-modal-lg" id="modal-1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">Your content</div>
    </div>
  </div>
  <div class="modal fade bd-example-modal-lg" id="modal-2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">Your content</div>
    </div>
  </div>
  <script src="ShowModal.js"></script>
</body>

【讨论】：