twitter-bootstrap - Twitterのブートストラップモーダルで背景色を変更しますか?

Question

Twitterブートストラップでモーダルを作成するとき、背景色を変更する方法はありますか? シェーディングを完全に削除しますか?

注: シェーディングを削除する場合、これは機能しません。これは、クリックの動作も変更するためです。（モーダルの外側をクリックして閉じることができるようにしたいです。）

$("#myModal").modal({
  backdrop: false
});

Answer 1

色を変更するには:

CSS

これらのスタイルをスタイルシートのブートストラップ スタイルの後に配置します。

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

以下

ブートストラップ変数を次のように変更します。

@modal-backdrop-bg:           red;

ソース

サス

ブートストラップ変数を次のように変更します。

$modal-backdrop-bg:           red;

ソース

ブートストラップ カスタマイザー

@modal-backdrop-bg希望の色に変更:

getbootstrap.com/customize/

---

Javascript を使用するか、色を に設定して、背景を削除することもできますtransparent。

Answer 2

特定のモーダルの背景色を変更したい場合は、次の方法で背景要素にアクセスできます。

$('#myModal').data('bs.modal').$backdrop

次に、.css jquery 関数を使用して任意の css プロパティを変更できます。特に、背景とともに：

$('#myModal').data('bs.modal').$backdrop.css('background-color','orange')

$('#myModal') を初期化する必要があることに注意してください。そうしないと、$backdrop が null になります。同じことが bs.modal データ要素にも当てはまります。

Answer 3

CSS

これが機能しない場合:

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

これを試して：

.modal { 
   background-color: red !important; 
}

Answer 4

ブートストラップモーダルバックグラウンドを削除するこれを試してください

.modal-backdrop {
   background: none;
}

Answer 5

背景を特定のモーダルに追加したい場合は、もう少し複雑になります。これを解決する 1 つの方法は、モーダルを直接表示する代わりに、この関数のようなものを追加して呼び出すことです。

function showModal(selector) {
    $(selector).modal('show');
    $('.modal-backdrop').addClass('background-backdrop');
}

その後、任意の css をbackground-backdropクラスに適用できます。

Answer 6

Bootstrap 4 では、 との両方でフラグを使用.modal-backdrop.showして遊んでみる必要がある場合があります。!importantbackground-coloropacity

例えば

.modal-backdrop.show {
   background-color: #f00;
   opacity: 0.75;
}

Answer 7

次の CSS を追加します。

.modal .modal-dialog .modal-content{  background-color: #d4c484; }

<div class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
...
...

Answer 8

Angular(7+) プロジェクトの場合:

::ng-deep .modal-backdrop.show {
    opacity: 0.7 !important;
}

それ以外の場合は、次を使用できます。

.modal-backdrop.show {
    opacity: 0.7 !important;
}