bootstrap 4 modal-backdrop 样式(特定模态)

Posted

技术标签:

【中文标题】bootstrap 4 modal-backdrop 样式(特定模态)【英文标题】:bootstrap 4 modal-backdrop style (specific modal) 【发布时间】:2018-09-20 03:52:51 【问题描述】:

我想知道如何更改特定模态的模态背景颜色(不是模态的背景颜色)。

如果我使用“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

【问题讨论】:

【参考方案1】:

您可以在模态框打开之前将自定义类添加到正文中,然后在关闭时删除该类...

$('#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

【讨论】:

【参考方案2】:

使用 div modal-content 而不是 modal-backdrop,像这样:

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

更新:

添加你的CSS:

.modal-backdrop.showbackground-color: red;

【讨论】:

嗨,我想改变modal-backdrop的背景颜色,而不是modal的背景颜色。 但是对于特定的模态,不是所有的模态。【参考方案3】:

如果我正确理解您的问题,我认为您可以将您的 CSS 更改为:

.modal-content 
  background-color:red;

【讨论】:

嗨,我想改变modal-backdrop的背景颜色,而不是modal的背景颜色。 你的意思是像overlay?

以上是关于bootstrap 4 modal-backdrop 样式(特定模态)的主要内容,如果未能解决你的问题,请参考以下文章

从 Bootstrap 3 迁移到 Bootstrap 4? [关闭]

Bootstrap ~3.7 和最新 Bootstrap (4) 之间简单代码的样式问题

Bootstrap-4.3.1版本的使用方法

同时使用 Bootstrap 3 和 Bootstrap 4

Bootstrap 4 导航栏不会在 Angular 4 中折叠

从 Bootstrap 3 迁移的 Bootstrap 4 网格布局问题