13

TwitterBootstrapモーダルウィンドウを使用しています。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>

次のようにhrefへのリンクを追加しようとすると

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

リンクされたページがモーダルウィンドウに読み込まれます!!

ここに画像の説明を入力してください

4

2 に答える 2

28

bootstrap-modal.jsの223行目を見ると、何が起こっているのかがわかりました。

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

データAPIを使用する場合、モーダルはhref属性がIDでないかどうかを確認し、それをオプションの値として設定しremoteます。これにより、ページdata-targetは最初にコンテンツをロードし、その後hrefコンテンツとしてremoteコンテンツをロードします。

data-remote="false"したがって、hrefコンテンツがモーダルにロードされないようにするには、リンクで指定する必要があります。

<a href="/some-login-page.html" data-toggle="modal" data-target="#login-modal" data-remote="false">Login</a>
于 2012-12-05T17:35:25.837 に答える
0

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

ただし、覚えておくべきことの1つは、Modalプラグインがhrefリモートコンテンツのロードに属性を使用することです。その機能がアクティブ化されないようにするには、href値の最後に「＃」を含めるだけです。

<a href="/some-login-page.html#" data-toggle="modal" data-target="#login-modal">Login</a>
于 2012-12-05T13:07:44.870 に答える