Twitter BootStrapモーダルウィンドウフォールバックリンク

Question

私はTwitter Bootstrapモーダルウィンドウを使用しています。ちょうどモーダルウィンドウを入れてjsエラーのために仕事をしない - フォールバックページを持っている。モーダルウィンドウにロードされていない場合、ページがロードされていることを確認するにはどうすればよいですか？

モーダルウィンドウを開くためのリンク

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

モーダルウィンドウ

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

私は

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

でリンクされたページのロードを次のようにHREFへのリンクを追加しようとすると、モーダルウィンドウ!!

Answer 1

何が起こっているのかを明らかにした：

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

データAPIを使用してモーダルチェックするとhref属性はIDではありませんし、設定した場合、その値として、 remoteオプションの場合これにより、ページに最初にdata-targetのコンテンツがロードされ、remoteというコンテンツの後にhrefのコンテンツが読み込まれます。

だから、あなたはあなたのリンクにdata-remote="false"を指定する必要がモーダルにロードされたばかりのhrefコンテンツ避けるために：

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

Answer 2

モーダルプラグインはdata-target属性に優先します。 hrefを使用して、必要なフォールバックリンクをポイントすることができます。 ModalプラグインがのpreventDefaultを呼び出すので、セレクタ[data-toggle="modal"]に一致するイベントをクリックすると、JavaScriptが無効になっている（またはModalプラグインがロードされていない）場合にのみリンクされます。

ただし、Modalプラグインは、リモートコンテンツの読み込みにhref属性を使用しています。その機能を有効にするのを回避するには、hrefの値の最後に「＃」を含めます。ブートストラップ・modal.jsでライン223を見て

は

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