0

サインアップ ページで TB 2.0 を使用しています。ユーザーが利用規約などを参照できるように、サインアップ ページの下部にリンクを追加しました。

これは私が使用しているマークアップのスニペットです:

<div class="container">
    <!-- First 2 rows are modal elements -->
    <div class="row">
        <div class="span12">
            <div id="userAgreement" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="userAgreementLabel" aria-hidden="true">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 id="userAgreementLabel">User Agreement</h4>
                </div>
                <div class="modal-body">
                    <p><?php echo file_get_contents(url_for('@legal',true)); ?></p>
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="span12">
            <div id="privacyPolicy" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="privacyPolicyLabel" aria-hidden="true">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 id="privacyPolicyLabel">Privacy Policy</h4>
                </div>
                <div class="modal-body">
                    <p><?php echo file_get_contents(url_for('@privacy', true)); ?></p>
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                </div>
            </div>
        </div>
    </div>

    <h3 align="center">Sign up to Foobar</h3>
    <br />

    <div class="row">
        <div class="span5 offset1 gray-1px-rh-border">

            <form class="form-horizontal" action="#" method="post">
                <div class="control-group">
                    <label class="control-label" for="inputEmail">Email</label>
                    <div class="controls">
                        <input type="text" id="inputEmail" placeholder="Email">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputUsername">Username</label>
                    <div class="controls">
                        <input type="text" id="inputUsername" placeholder="Username">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputPassword">Password</label>
                    <div class="controls">
                        <input type="password" id="inputPassword" placeholder="Password">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputConfirmPassword">Confirm Password</label>
                    <div class="controls">
                        <input type="password" id="inputConfirmPassword" placeholder="ConfirmPassword">
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <label class="checkbox">
                            <input type="checkbox" id="chk-agree">Agree Terms*
                        </label>
                        <button type="submit" class="btn btn-success" id="signup-button">Get Access</button>
                    </div>
                </div>
            </form>

        </div>

        <div class="span4">
            <div class="container shift-right">
            </div>
        </div>
    </div>

    <br />

    <div class="row">
        <div class="span10 offset1">
            <div class="sign-up-agreement">
                <small>*By signing up, you are indicating that you have read, understood and agree to our 
                   <a id="lpl1" href="#userAgreement"  data-toggle="modal">user agreement</a> and 
                   <a id="lpl2" href="#privacyPolicy" data-toggle="modal">privacy policy</a>.
                </small>
            </div>
        </div>    
    </div>

</div>

ポップアップ ダイアログが一時的に (約 1 秒間) 表示され、消える前に、下から上にスクロールしているように見えます (非常に迅速に発生するため、これを数回行う必要がありました)。ダイアログは下から上にスクロールするように見えます。最後に表示されるのは、タイトルの付いたダイアログ ボックスのヘッダーです。その後、ダイアログ ボックスのヘッダーが消え、画面をクリックするまでページが暗いままになります。

[[編集]]

Firebug を使用してさらに調査した結果、問題を JavaScript に関係するものに絞り込みました。要素に適用された #display# スタイル属性が (非常に簡単に) に設定されblock、その後すぐに (なんらかの理由で) #display# 属性がnoneに設定されていることに気付きました- これにより、ダイアログが消えます.

firebug コンソールでdisplay属性を手動で設定すると、ポップアップ ダイアログが表示され、通常どおりに動作しました。block問題はこれです:約 1 秒後に表示属性が「なし」にリセットされる原因は何ですか?

[[編集2]]

2 つのポップアップの関数呼び出しを「hello world」や「hello 2」などの単純なテキストに置き換えるfile_get_content()と、期待どおりに (正しく) 動作します。したがって、関数で返される HTML テキストと関係があることは間違いありませんget_file_content()。

どんな助けでも感謝します。

4

2 に答える 2

1

これは、jQuery を複数回組み込むことによって発生する場合があります。そうでないことを確認してください。

また、モーダルの位置を手動で変更して、モーダルが画面上で開始されるようにすることもできます。余白を変更するだけです。私のチュートリアルを見てみましょう: Twitter ブートストラップの位置を変更する これがお役に立てば幸いです。

于 2012-11-15T11:24:04.480 に答える
0

最後に、取得したコンテンツをiframefile_get_contents()に配置することでこれを解決しました。それがより良い方法であるかどうかはわかりませんが、これが機能することがわかった唯一のものです。

于 2012-11-15T14:47:52.810 に答える