Автоматическое открытие Bootstrap по внешней ссылке

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

это покажет содержание для option1

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

это покажет содержание для option2

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

Кодекса

http://jsfiddle.net/fFcS2

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

Answer 3

Если кто приходит сюда в поисках динамичного решения (где вы не должны заранее определить модальные идентификаторы), здесь вы идете :

$(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, а затем показывает модальный с соответствующим идентификатором.