Twitter BootStrap Modal Window zastępczy link

Question

Używam okien modalnych Boot na Twitterze. Wystarczy przycisnąć okna modalne nie działają z powodu błędu js - mają strony z powrotem. Jak mogę się upewnić, że strona zostanie załadowana, jeśli okno modalne nie zostanie załadowane?

link, aby otworzyć okno modalne

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

modalne okno

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

Gdy próbuję dodać link do href następująco

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

połączona strona ładunki w Okno modalne !!

Answer 1

Patrząc na linii 223 w bootstrap-modal.js ujawnił, co się dzieje:

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

Podczas korzystania z danych API modalne sprawdza czy atrybut href nie jest id i ustala, że ​​jako wartość dla opcji remote. Powoduje to, że strona ładuje początkowo zawartość data-target, a następnie ładuje ją do zawartości href po zawartości jako remote.

Więc aby uniknąć href zawartość coraz załadowany do modalnym trzeba określić data-remote="false" na link:

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

Answer 2

modalnego plugin daje pierwszeństwo do atrybutu data-target. Następnie możesz użyć href, aby wskazać łącze rezerwowe, które chcesz. Ponieważ wtyczka Modal wywołuje preventDefault na kliknięciu zdarzeń pasujących do selektora [data-toggle="modal"], link będzie stosowany tylko wtedy, gdy JavaScript jest wyłączony (lub wtyczka Modal nie jest załadowana).

Należy jednak pamiętać, że wtyczka Modal używa atrybutu href do ładowania zdalnej zawartości. Aby obejść tę funkcję, należy włączyć znak "#" na końcu wartości href.

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