9

ツイッターのブートストラップモーダルに問題があります...

.fade要素にクラスがない場合は正常に機能します。追加するとすぐにモーダルが表示されません。

私はこの行まで問題を追跡したと思います：

doAnimate ?
  this.$backdrop.one(transitionEnd, callback) :
  callback()

doAnimateですwebkitTransitionEnd、それはうまく見えます。transitionEndしかし、コールバックに何かを記録しようとし、ログに記録されないため、解雇されることはないと思います。

何か案は？

編集：いくつかのコード

リンク：

<a href="/events/2-fefewfewfe/rsvps" data-backdrop="true" data-controls-modal="event-modal" data-keyboard="true">I'm attending!<span class="ico join"></span></a>

モーダル（フェードクラスなしで機能しますが、追加すると機能しません）

<div id="event-modal" class="modal hide fade"></div>

css：

.modal.fade {
    -webkit-transition: opacity .3s linear, top .3s ease-out;
    -moz-transition: opacity .3s linear, top .3s ease-out;
    -ms-transition: opacity .3s linear, top .3s ease-out;
    -o-transition: opacity .3s linear, top .3s ease-out;
    transition: opacity .3s linear, top .3s ease-out;
    top: -25%;
}

私は何かが足りないのですか？

4

6 に答える 6

7

受け入れられたにもかかわらず、この回答の情報は正しくなかったため、混乱を避けるために元の回答を削除しました。これは、フェードを使用した動作デモのjsFiddleですhttp://jsfiddle.net/sfWBT/880/

以前のjsFiddleが機能していなかったため、更新されたリンクを提供するように編集されました。コードなしでjsFiddleを追加することはできなくなりました。したがって、ここにコードもあります：

html：

<div id="event-modal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <a class="close" href="#">x</a>
        <h3>Modal Heading</h3>
      </div>
      <div class="modal-body">
        <p>Some information</p>
      </div>
      <div class="modal-footer">
        <a class="btn primary" href="#">Primary</a>
        <a class="btn secondary" href="#">Secondary</a>
      </div>
    </div>
  </div>
</div>

js：

$(function() {
  $('#event-modal').modal({
    backdrop: true
  });
});
于 2011-11-17T04:24:56.447 に答える
5

私も同じ問題を抱えていました。既存のプロジェクトでブートストラップを使用しようとしていましたが、クラス名の多くが自分のクラス名と衝突したため、.tbs名前空間を使用してbootstrap.cssを再コンパイルしました。モーダルウィンドウプラグインでは、背景要素がdocument.bodyに追加されます。モーダル背景が私の.tbs名前空間になかったため、cssフェードセレクターは適用されませんでした。したがって、遷移は発生せず、したがってコールバック関数は起動されませんでした。変更してこれを修正しました

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />').appendTo(document.body)

に

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />').appendTo($('.tbs')[0])
于 2012-10-12T12:49:42.810 に答える
1

ツイッターブートストラップフレームワークの一部だけを使用したかったのと同じ問題がありました。

あなたのケースのロビンに欠けているのはCSSスタイルです。モーダルが正しく機能するには、「component-animations.less」ファイルのルールを含める必要があります。

これにより、モーダルが追加された「.fade」クラスで動作できるようになります。

于 2012-05-16T12:40:27.403 に答える
1

jsファイルの1つで次のjqueryを試してください。モーダル/アラート内に「閉じる」クラス化された要素が必要になります

アラートボックス用

$(".alert .close").click( function() {
     $(this).parent().addClass("fade");
});

またはモーダルの場合（要素のネストによって異なる場合があります）

$(".modal .modal-header .close").click( function() {
   $(this).parent().parent().addClass("fade");
});
于 2012-06-20T01:47:48.607 に答える
0

モーダル動作をもたらすプラグインを使用する必要があります。これはTwitterのjQueryプラグインです。そのスクリプトの参照：http ：//twitter.github.com/bootstrap/javascript.html#modal

また、正しいHTMLを使用していることを確認してください（ページには表示されていません）。そのリンクのソースコードから：

<div class="modal hide fade" id="modal-from-dom">
    <div class="modal-header">
        <a class="close" href="#">×</a>
        <h3>Modal Heading</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…&lt;/p>
    </div>
    <div class="modal-footer">
        <a class="btn primary" href="#">Primary</a>
        <a class="btn secondary" href="#">Secondary</a>
    </div>
</div>

@ChristianVargaが提案する「in」クラスは、モーダルプラグインによって自動的に追加されることに注意してください。ドキュメントで指摘されているように、プラグインのみを初期化する必要があります。

于 2011-12-29T22:14:37.300 に答える
0

私にとっての問題は@sleepysamuraiと同じで、ブートストラップファイルに名前空間を付けていたため、モーダルが壊れています。ただし、すでに「カスタマイズ」されているため、.jsではなく.cssを変更して修正しました。具体的には（Bootstrap 2.3.2の場合、名前空間はにbootstrap-container）：

  • すべてを検索/置換し.bootstrap-container .modal-、に置き換え.modal-ます。
  • すべてを検索/置換し.bootstrap-container .fade、に置き換え.fadeます。

つまり、モーダルルールとフェードルールの名前空間を解除すると、問題が修正されました。

于 2013-12-05T14:34:55.523 に答える