1

既存のページに BootStrap モーダルを追加しようとしていますが、次の問題が発生しています。

モーダルは期待どおりに表示され、コンテンツは非常に美しく見えますが、2 つの問題があります。class="modal"ページがロードされて閉じないときに、デフォルトでモーダル表示のみを指定すると。含めるclass="modal hide"と、モーダルはページの読み込み時に表示されませんが、適切なボタンをクリックしても閉じません。

Bootstrap サイトのモーダル サンプル コードから大きく逸脱しているわけではありません。何がうまくいかないのでしょうか?

モーダルを起動するボタンは次のとおりです。

<a class="btn" data-toggle="modal" href="#testmodal" >About</a>

そして、モーダル自体は次のとおりです。

    <div class="modal hide fade in" id="testmodal">
        <div class="modal-header">
            <button class="close" data-dismiss="modal">x</button>
            <h3>Modal Header</h3>
        </div>
        <div class="modal-body">
            <p>body</p>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn">Close</a>
        </div>
    </div>

記録のために、はい、bootstrap-modal.js と bootstrap-transition.js を含めることを忘れていませんでした。

4

2 に答える 2

1

問題が解決してよかったです。

また、何もカスタマイズせずにデフォルトのブートストラップ機能が必要な場合は、メイン ページの大きなダウンロード ボタンを使用してください。この zip ファイルには、すべてのプラグイン (モーダル ダイアログなど) を含むデフォルトの bootstrap.min.js ファイルが含まれています。すべての個別の javascript ファイルの代わりにそれを使用すると、ページの要求が少なくなり、読み込みが速くなります。

于 2012-05-20T20:31:09.397 に答える
0

閉じるリンクは次のようになります。

<a class="close" data-dismiss="modal">×</a>

data-dismiss はカスタム HTML5 データ属性であるためです。ここでは、モーダル ウィンドウを閉じるために使用されます。

于 2012-05-20T11:02:35.943 に答える