從外部鏈接自動打開引導模式

Question

我有一個連接4-5個不同模式的頁面。每個都有唯一的#value（obv）。 我試圖找到一種方法來鏈接到這些個人模式'從外部來源（在這種情況下，一個HTML電子郵件）。

例如：

「點擊此處查看方向」的電子郵件需要鏈接到 - >> www.myurl.com/#directions

的#directions規劃一塊應該觸發：功能在頁面加載和模式自動打開。

這是可能的還是我只是在做夢？

Answer 1

您可以使用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">&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

內容

這將在回來......您的解決方案工作100％，顯示內容選項2

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

代碼

http://jsfiddle.net/fFcS2

Answer 2

抱歉耽擱。 正如我已經有多種模態，我修改這樣的代碼：

<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> 

Answer 3

如果有人來這裏尋找一個動態的解決方案（在這裏你不必預先定義模式IDS），在這裏你走：

$(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顯示模式。