CSS模态显示背景内容，使可读性较低

Question

目前，我正在单击按钮中显示模态。
但问题是它也在模态部分中显示背景内容。
所以，我的模态内容文本与主要内容相矛盾。
有人可以帮我解决这个问题吗？以下是下图中模态的代码和当前视图

.order-view-modal {
    display: block;
    opacity: 0.8 !important;
    background-color: black;
    position: fixed;
    z-index: 10001 !important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 1rem;
}

.order-view-modal-content {
    background-color: white;
    width: 50%;
    height: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    padding: 1rem;
}

Answer 1

之所以发生这种情况，是因为您已经添加了不透明度：0.8！重要样式为.erder-view-modal。您正在降低order-view-modal元素的不透明度，并假设order-view-view-view-modal-content是其孩子，该样式也将应用于它。

您可以做的是在order-view-mododal中创建另一个元素，该元素充当背景，并在其中添加不透明度样式。这样，不透明度样式将不适用于order-view-view-modal-content。查看下面的片段。

.bg {
  display: block;
  background: red;
  width: 100%;
  height: 100%;
}

.order-view-modal {
  display: block;
  /* opacity: 0.8 !important; */
  /* background-color: black; */
  position: fixed;
  z-index: 10001 !important;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* padding: 1rem; */
}


/* Background element styling */

.order-view-modal-bg {
  display: block;
  opacity: 0.8 !important;
  background-color: black;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 1rem;
}

.order-view-modal-content {
  background-color: white;
  width: 50%;
  height: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  padding: 1rem;
}

<div class="bg">
  <!-- Modal markup -->
  <div class="order-view-modal">
    <div class="order-view-modal-bg"></div>
    <div class="order-view-modal-content"></div>
  </div>
  <!-- End modal markup -->

  <p>
    <b> HTML </b> stands for <i> <u> Hyper Text Markup Language. </u> </i> It is used to create a web pages and applications. This language is easily understandable by the user and also be modifiable. It is actually a Markup language, hence it provides
    a flexible way for designing the web pages along with the text.
  </p>
  HTML file is made up of different elements. <b> An element </b> is a collection of <i> start tag, end tag, attributes and the text between them</i>.
  </p>
</div>

过渡的解决方案：

添加过渡，使用active> active> active的类，如下面的摘要中，以控制模态状态。单击按钮，活动类添加到模式的类列表中。默认的垂直位置为-100％，而活动位置为0％。我将过渡时机添加为3s。如果感觉很长，您可以随身携带它并找到最佳位置。

我还添加了盒子大小：border-box 订单 - 视图 - 模式-BG，以使元素高度中的填充物包含。

$('#open-modal-btn').on('click', function() {
  $('#order-view-modal').addClass('active');
});

.bg {
  display: block;
  background: red;
  width: 100%;
  height: 100%;
}

.order-view-modal {
  display: block;
  /* opacity: 0.8 !important; */
  /* background-color: black; */
  position: fixed;
  z-index: 10001 !important;
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  /* padding: 1rem; */

  /* Transition effect */
  transition: 3s ease-out; 
}

.order-view-modal.active{
  top: 0%;
}


/* Background element styling */

.order-view-modal-bg {
  display: block;
  opacity: 0.8 !important;
  background-color: black;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 1rem;
  box-sizing: border-box;
}

.order-view-modal-content {
  background-color: white;
  width: 50%;
  height: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  padding: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bg">
  <!-- Modal markup -->
  <div class="order-view-modal" id="order-view-modal">
    <div class="order-view-modal-bg"></div>
    <div class="order-view-modal-content"></div>
  </div>
  <!-- End modal markup -->
  
  <button id="open-modal-btn">Open Modal</button>

  <p>
    <b> HTML </b> stands for <i> <u> Hyper Text Markup Language. </u> </i> It is used to create a web pages and applications. This language is easily understandable by the user and also be modifiable. It is actually a Markup language, hence it provides
    a flexible way for designing the web pages along with the text.
  </p>
  HTML file is made up of different elements. <b> An element </b> is a collection of <i> start tag, end tag, attributes and the text between them</i>.
  </p>
</div>

Answer 2

请考虑此解决方案。您需要在不透明的覆盖背景周围创建一个包装器，并且需要将实际型号保留在外部覆盖包装纸外部。

.model-wrapper {
        position:  fixed;
        display: block;
        top: 0;
        left:  0;
        height: 100%;
        width:  100%;
      }
      .overlay {
        position: absolute;
        width: 100%;
        height:  100%;
        background-color: black;
        opacity: 0.3;
      }
      .model {
        background-color: white;
        width: 50%;
        height: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
        padding: 1rem;
      }

<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <p>Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World </p>
    <p>Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World </p>
    <p>Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World </p>
    <p>Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World </p>
    <p>Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World </p>
    <p>Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World </p>

    <div class="model-wrapper">
      <div class="overlay"></div>
      <div class="model">
        <h1>Order Data</h1>
        <p>This is content section</p>
      </div>
    </div>
    
  </body>
</html>