2017-10-10 3 views
2

Je veux ouvrir un modal avec hachage (exemple: www.example.com/#example.) Ceci est mon code ci-dessous mais le modal ne s'affiche pas. Merci pour votre réponse et je l'apprécie.Ouverture modale avec hachage

$(document).ready(function() { 
 
    $('.popup').click(openModalPopupClick); 
 

 
      function openModalPopup(){ 
 
      var hashText = window.location.hash.substr(); 
 
      if (hashText){ 
 
       $('#'+hashText).modal('show'); 
 
      } 
 
      } 
 

 
      function openModalPopupClick(){ 
 
      var hashText = $(this).attr('href'); 
 
      if (hashText){ 
 
       $(hashText).modal('show'); 
 
      } 
 
      } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<a href="#regis-new-company" class="popup" role="button">click</a> 
 
<div class="modal fade" id="regis-new-company" role="dialog" aria-labelledby="myLargeModalLabel"> 
 
    <div class="modal-dialog modal-lg"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"></div> 
 
     <div class="modal-body"></div> 
 
     <div class="modal-footer"></div> 
 
    </div> 
 
    </div>  
 
</div>

+0

Je mis à jour votre question avec 'bootstrap' cdn, maintenant il ressemble à travailler, pas très bien quel est votre problème,' ​​# regis-new-company' modal fonctionne très bien. – Pedram

Répondre

0

hashText ont allready # si $('#'+hashText).modal('show'); doit être $(hashText).modal('show'); et appeler la fonction openModalPopupClick sur prêt. J'ai mis à jour votre code.

$(document).ready(function() { 
$('.popup').click(openModalPopupClick); 

     function openModalPopup(){ 
     var hashText = window.location.hash.substr(); 
     if (hashText){ 
      $(hashText).modal('show'); 
     } 
     } 

     openModalPopup(); 

     function openModalPopupClick(){ 
     var hashText = $(this).attr('href'); 
     if (hashText){ 
      $(hashText).modal('show'); 
     } 
     } 
}); 
+0

hey @zeeshan Anjum merci beaucoup, votre code a fonctionné! mais maintenant j'ai un autre problème avec mon effondrement. c'est la fonction openModalPopup(); conflit avec mon effondrement accordéon dans la même page. Quand j'entre une autre URL d'hastag dans cette page pour la fonction de repli, le openModalPopup(); appelez toujours pour que la page affiche l'arrière-plan de la fenêtre semi-grise. –

+0

if (location.hash! = Null && location.hash! = "") { $ ('.plapse'). RemoveClass ('in'); $ (location.hash + '.collapse'). Collapse ('show'); } \t \t \t // lien pop-up \t $ ('pop-up.) Cliquez sur (openModalPopupClick). Fonction openModalPopup() { var hashText = window.location.hash.substr(); if (hashText) { $ (hashText) .modal ('show'); } } openModalPopup(); function openModalPopupClick() { var hashText = $ (this) .attr ('href'); if (hashText) { $ (hashText) .modal ('show'); } } –

+0

Vous pouvez ajouter une condition lorsque la fonction openModalPopup doit appeler. comme 'if (hashText ==" # open-modal ") openModalPopup();' –