52

Rails 3.2 アプリで基本的なモーダル ウィンドウを作成するために、twitter ブートストラップからサンプル コードをコピーして貼り付けました。

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" 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 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…&lt;/p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

<a href= "#myModal"  role="button" class="btn" data-toggle="modal">Launch demo modal</a>

動いていない。これは、jQuery やスクリプトがロードされていないためではありません。a) データ ターゲティングを使用しているため、js をロードする必要がなく、b) コンソールを確認したところ、すべてが完全に起動しています。

また、boostrap.js と bootstrap-modal.js の両方を含めているからでもありません...確認しましたが、そうではありません。

私は途方に暮れています。それはうまくいくはずです。他のブートストラップ js はサイトで正常に動作しています。

私が考えることができる唯一のことは、クラス .hide と .fade の定義と関係があるということです - それらを取り出すと、モーダルはうまく表示されます。それらを含めると、まったく表示されません。

jQuery UI が干渉している可能性はありますか?

私を助けるために必要な情報があれば、私に尋ねてください...

アップデート：

だから私は問題を見ていると思いますが、それを修正する方法がわかりません。コンソールを確認すると、一番上に

element.style {
display: none;
}

何らかの形で div の一部になっているため、コンソールでは次のように表示されます。

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;" >

しかし、なぜそれを追加しているのか、どこから追加しているのかはわかりません。どうすればこれを追跡できますか?

ありがとう

4

27 に答える 27

77

その理由を突き止めました。

この質問に来る人に一般的な有用性を与えるためだけに。何が問題なのか分からない場合は、アプリケーションの任意のスタイル シートで、「モーダル」、「フェード」、「フェード イン」、および「非表示」のクラスを「すべて検索」してみてください。

ランダムなcssファイルで定義されている「フェード」の単一のインスタンスがありました。それが、ブートストラップをオーバーライドしていたため、表示を停止していました。参照を削除したら、すべて問題ありませんでした。

于 2013-04-19T01:01:25.603 に答える
1

< li >内にモーダル< div >がありました....良くありません。

外部は正常に動作します:-)

<div class="modal fade" id="confirm-logout" tabindex="-1" role="dialog" aria-labelledby="logoutLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">....</h4>
            </div>

            <div class="modal-body">
                <p>....</p>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <a class="btn btn-danger btn-ok">OK</a>
            </div>
        </div>
    </div>
</div>
<li>
    .....
</li>
于 2015-11-18T10:37:36.650 に答える
0

私は ui-bootstrap-tpls.js を使用しています。私にとってうまくいったのは、プロジェクト全体でフェードを検索し、上記のファイルでこれが設定されている場所を 3 つ見つけたことです。

検索結果を調べたところ、2 つの変更がモーダルで行われ、もう 1 つの変更がツール ヒント アニメーションで設定されていることがわかりました。以下のコードの違いに注意してください

'uib-modal-animation-class': 'fade'
'tooltip-animation-class="fade"'

この問題を解決するために私がしたことは、uib-modal の show クラスを追加することでした

'uib-modal-animation-class': 'fade show'
于 2021-02-10T22:02:35.097 に答える