Twitter BootStrap Modal Fenêtre lien de secours

Question

J'utilise Twitter Bootstrap modal windows. Juste au cas où les fenêtres modales ne fonctionneraient pas à cause de l'erreur js - avoir des pages de repli. Comment puis-je m'assurer que la page est chargée si la fenêtre modale ne se charge pas?

lien pour ouvrir la fenêtre Modal

<a href="#login-modal" data-toggle="modal" data-target="#login-modal">Login</a> 

fenêtre Modal

<!-- Login Modal --> 
     <div id="login-modal" class="modal hide fade landing-modal" tabindex="-2" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
        × 
       </button> 
       <h3>Login</h3> 
      </div> 
      <div class="modal-body"> 
       <form> 
        <div class="control-group"> 
         <label for="email">Email Address</label> 
         <div class="controls"> 
          <input class="input-medium" name="email" type="text" /> 
         </div> 
        </div> 
        <div class="control-group"> 
         <label for="password">Password</label> 
         <div class="controls"> 
          <input class="input-medium" name="password" type="password" /> 
         </div> 
        </div> 
        <div class="control-group"> 
         <label class="checkbox"> 
          <input type="checkbox" value=""> 
          Remember me</label> 
        </div> 
        <div class="control-group"> 
         <div class="controls"> 
          <button type="submit" class="button"> 
           Login 
          </button> 
         </div> 
        </div> 
       </form> 
      </div> 
     </div> 

Quand j'essaie d'ajouter le lien vers le href comme suit

<a href="login.html" data-toggle="modal" data-target="#login-modal">Login</a> 

les liés page charges dans le Fenêtre modale !!

Answer 1

regardant la ligne 223 dans bootstrap-modal.js a révélé ce qui se passe:

, option = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data()) 

Lorsque vous utilisez les données api les contrôles modales si l'attribut href est pas un identifiant et définit que la valeur pour l'option remote. Cela provoque la page pour charger le contenu data-target initialement, puis charger dans le contenu href après le contenu remote.

Donc, pour éviter le contenu href se charger dans le modal, vous devez spécifier data-remote="false" sur votre lien:

<a href="/some-login-page.html" data-toggle="modal" data-target="#login-modal" data-remote="false">Login</a> 

Answer 2

Le plugin Modal donne la priorité à l'attribut data-target. Vous pouvez ensuite utiliser le href pour pointer vers le lien de secours que vous souhaitez. Depuis le plugin Modal appelle preventDefault sur cliquez sur événements correspondant au sélecteur [data-toggle="modal"], le lien ne sera suivi si JavaScript est désactivé (ou le plugin Modal n'est pas chargé). Cependant, une chose à garder à l'esprit est que le plugin Modal utilise l'attribut href pour charger le contenu distant. Pour ne pas activer cette fonctionnalité, ajoutez simplement un '#' à la fin de la valeur href.

<a href="/some-login-page.html#" data-toggle="modal" data-target="#login-modal">Login</a>