Question

我正在尝试找到解决此问题的最简单方法。我只是希望我的开放模态的背景有一个灰色的外观。我似乎无法找到这个问题的任何直接答案。我接近完成了这个。现在我的javascript在模态打开时为应用程序的整个主体添加了一个类。该类称为openModal。我目前的尝试是在该课程上致电opacity: 0.4;。这确实为页面添加了不透明度。但它也涵盖了模式。我不想发生这种事。如何让模态覆盖不透明度？

这是我的CSS。

.openModal {
  opacity: 0.3;

  .proceeds-modal {
    padding: 20px;
    position: absolute;
    top: 200px;
    width: 95%;
    right: 2%;
    height: auto;
    background-color: $base-background-color;
    border: 1px solid #ddd;
    box-shadow: 0.2px 0.6px 0.5px 0.5px;
  }
}

Answer 1

如果没有看到您的HTML，我建议您在rgba()上设置.openModal背景，例如.openModal { background: rgba(0,0,0,0.5); }

或者您可以始终使用.openModal的伪元素，并使用rgba()或使用opacity，就像您已经尝试过的那样。

＆＃13;

.proceeds-modal {
  padding: 20px;
  position: absolute;
  top: 200px;
  width: 95%;
  right: 2%;
  height: auto;
  background-color: white;
  border: 1px solid #ddd;
  box-shadow: 0.2px 0.6px 0.5px 0.5px;
  z-index: 1;
}

.openModal:after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  content: '';
}

＆＃13;

<div class="openModal">
  <div class="proceeds-modal">
    modal
  </div>
</div>

＆＃13;

Answer 2

我建议您使用以下基本 HTML 结构：

<div class="main-container">
  This is the page main content
</div>

<div class="modal-overlay" id="modal-overlay"></div>

<div class="modal-container">
    <div class="modal-container-controls">
        <button class="modal-container-close-button">Close modal button</button>
    </div>

    <div class="modal-container-content">
        <p><strong>Modal title</strong></p>
        <p>Modal content text 1</p>
        <p>Modal content text 2</p>
    </div>
</div>

如您所见，有 2 个不同的 div：

modal-overlay 用于主体和模态之间的背景层
modal-container 用于模态本身

这样，您可以为它们设置不同的样式。

您可以阅读有关开发自定义模态 here 的更多信息。

为open modal创建背景 - CSS NO BOOTSTRAP

2 个答案: