web-dev-qa-db-ja.com

bootstrap 4モーダル背景スタイル（特定のモーダル）

特定のモーダルのモーダル背景の色（モーダルの背景色ではない）をどのように変更できるのでしょうか。

「shown.bs.modal」を少し遅れて使用すると、色が変わる可能性があります。でも、すぐに背景色を変えたいです。誰かが助けてくれることを願っています。ありがとうございました。

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (e) {
                $(".modal-backdrop").css('background', '#fb0404');
            })

codepen： https://codepen.io/rae0724/pen/oqmPmY

jquerycsstwitter-bootstrapmodal-dialogbootstrap-4
5
demoncoder

本体にカスタムクラスを追加することができますbeforeモーダルが開かれ、閉じられたときにクラスを削除します...

$('#exampleModal').on('show.bs.modal', function (e) {
    $('body').addClass("example-open");
}).on('hide.bs.modal', function (e) {
    $('body').removeClass("example-open");
})

背景に適用されるカスタムカラーのCSSが必要です。

.example-open .modal-backdrop {background-color:red;}

https://www.codeply.com/go/oNKsVikW6n

3
Zim

次のように、モーダル背景の代わりにdivモーダルコンテンツを使用します。

$(".modal-content").css('background', 'red');

更新：

あなたのCSSを追加します：

.modal-backdrop.show{background-color: red;}
2
Gaylord.A

私があなたの質問を正しく理解しているなら、あなたはあなたのCSSをこれに変えることができると思います：

.modal-content {
  background-color:red;
}
0
Patrick Dougherty