39

ajax の実行中に画面にオーバーレイを表示したいと考えています。独自のオーバーレイ div を構築することは大したことではありませんが、私は既に Bootstrap を使用しているので、Bootstrap を使用したほうがよいと思います。既に使用されて.modal-backdropいるはずであり、一貫性などには何らかの価値があります。

問題は、正しい方法が見つからないことです。クラスを.modal-backdropに追加したり、呼び出したり.show()しましたが、機能しません。

モーダル ダイアログ全体を表示するのではなく、背景を表示して非表示にするだけであることに注意してください。

助言がありますか？

4

2 に答える 2

64

divそのクラスでa を に追加し、body完了したら削除します。

// Show the backdrop
$('<div class="modal-backdrop"></div>').appendTo(document.body);

// Remove it (later)
$(".modal-backdrop").remove();

実際の例:

$("input").click(function() {
  var bd = $('<div class="modal-backdrop"></div>');
  bd.appendTo(document.body);
  setTimeout(function() {
    bd.remove();
  }, 2000);
});
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<p>Click the button to get the backdrop for two seconds.</p>
<input type="button" value="Click Me">

于 2013-05-10T16:46:59.297 に答える
-4

「.modal-backdrop」クラスがcssのトップレベルで定義されているので、かなり奇妙です。

<div class="modal-backdrop"></div>

小さなデモを作成しました: http://jsfiddle.net/PfBnq/

于 2013-05-10T16:57:35.597 に答える