13

私のページには、標準の Twitter Bootstrap モーダルがあります。

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Comments</h3>
  </div>
  <div class="modal-body">
    <p>Please provide a comment:</p>
    <textarea id="comment"></textarea>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn btn-primary">Save comment</a>
  </div>
</div>

今、AJAX 経由でコメントを保存し、保存が成功したらモーダルを閉じます。ただし、グローバルな AJAX エラー ハンドラーがあります。これは、AJAX 呼び出しでエラーが発生したときにモーダルを開きます (コメントの AJAX 呼び出しだけではありません)。

<div id="error-modal" class="modal hide" 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>Error</h3>
    </div>
    <div class="modal-body">
    </div>
    <div class="modal-footer">
    </div>
</div>

modal-body はエラー ハンドラによって埋められ、デフォルトでは、新しいモーダルが既存のモーダルの上に配置されます。ただし、新しいモーダルのモーダル背景は元のモーダルの背後にあるため、元のモーダルとの対話は引き続き可能です。

エラーモーダル背景に別の z-index を与える方法はありますか? 現在、モーダル背景はモーダルに依存せず、モーダル固有の ID/クラスを持っていません。

または、複数の Twitter Bootstrap モーダルを処理する優れたプラグインはありますか?

4

3 に答える 3

9

このBootstrap Modalプラグインをチェックする価値があるかもしれません。

ここのデモでは...
http://jschr.github.io/bootstrap-modal/

...例の1つに「スタック可能な」モーダルがあり、私が知る限り、新しいモーダルの背後にある古いモーダルと対話することはできません。つまり、最初に新しいモーダルの背景をクリックして、新しいモーダルを消し、古いモーダルにアクセスする必要があります。id(この例では、各モーダルに異なる s が与えられていることに注意してください。)

余談ですが、ある時点でこのプラグインの使用を検討しましたが、この記事の一部は、インライン編集にモーダルを使用しないという議論を提供したと思います: http://www.keepitslickstupid.com/ (web.archive.org から) (セクション 3「モーダル ダイアログは 2002 年です」を参照してください)。

于 2013-05-29T12:44:14.503 に答える
4

これが私がそれに取り組んだ方法です。ブートボックスのモーダル内で開始された AJAX 呼び出しからのエラー メッセージを表示していました。それは混乱を引き起こしました。そこで、私が z-index に対して行ったことは次のとおりです。

.bootbox.modal {
    z-index: 1070;
}

.bootbox.modal + .modal-backdrop {
    z-index: 1060;
}

ここで何が起こるかというと、背景の初期の z-index は 1040 で、モーダルは 1050 です。bootbox がページの最後にモーダルと背景を追加するので、bootbox に 1070 の z-index を与えたのでそのままですCSS で "+" セレクターを使用して、ブートボックスの直後にあるモーダル背景のみを選択し、その z-index を 1060 に変更しました。ブートボックス。

ブートボックスを使用していない場合は、カスタム クラスをセカンダリ モーダルに割り当てて、そこから作業を進めることができると思います。定義済みのモーダルがある場合、モーダル背景がどのように積み重なっていくかは見ていませんが、要素を調べてそれに応じて CSS セレクターを選択してください。

乾杯

于 2015-05-16T01:06:11.757 に答える
1

これはあなたの視点によっては答えではないかもしれませんが、試してみます：

私は少し前にまったく同じ問題に直面しました。別のモーダルを開く代わりに、ajax エラー ハンドラーに、既に開いているモーダルの先頭にエラー メッセージを追加するだけにすることにしました (何もない場合は、空のモーダルが最初に開かれます)。

これは、プログラミングの点でより単純であり (他のハックやプラグインは必要ありません)、ユーザーの観点からも私見です。少ないほうが多い場合もあります。

どのアプローチを選択するかは、今後この問題に遭遇する可能性のある人に任せます...

于 2014-07-29T15:36:05.213 に答える