56

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

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

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

12 に答える 12

107

色を変更するには:

CSS

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

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

以下

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

@modal-backdrop-bg:           red;

ソース

サス

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

$modal-backdrop-bg:           red;

ソース

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

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

getbootstrap.com/customize/

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

于 2012-05-14T15:16:08.737 に答える
12

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

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

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

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

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

于 2014-10-08T02:32:06.737 に答える
7

CSS

これが機能しない場合:

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

これを試して：

.modal { 
   background-color: red !important; 
}
于 2015-11-06T22:10:40.817 に答える
6

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

.modal-backdrop {
   background: none;
}
于 2015-12-11T10:22:57.720 に答える
3

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

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

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

于 2014-06-23T01:23:33.167 に答える
3

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

例えば

.modal-backdrop.show {
   background-color: #f00;
   opacity: 0.75;
}
于 2019-07-08T22:48:57.870 に答える
2

次の CSS を追加します。

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

<div class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
...
...
于 2016-08-20T21:47:34.647 に答える
0

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

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

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

.modal-backdrop.show {
    opacity: 0.7 !important;
}
于 2020-02-28T18:39:15.870 に答える