显示微调器时如何使引导模式变灰？答案

【问题标题】：how to grey out bootstrap modal when a spinner is showing?显示微调器时如何使引导模式变灰？
【发布时间】：2021-01-11 02:21:05
【问题描述】：

在下面的示例中，使用可以打开一个模式，输入一条消息然后发送它...发送消息需要 2 秒...我想展示一个微调器（它已经在工作）但是我还想在微调器显示时将模态的背景设为灰色...

$("#sendBtn").click(function() {
  $('.sending-message-spinner').show();
      setTimeout(function () {
        $("#myModal").modal("hide");
    }, 2000);
});

textarea {
   width: 100%;
   height: 80px;
}

@keyframes loading {
   0% {
       transform: rotate(0);
   }
   100% {
      transform: rotate(360deg);
   }
}

.sending-message-spinner {
   position: fixed;
   text-align: center;
   z-index: 20;
   display: none;
   width: 40px;
   height: 40px;
   border: 8px solid #B0B0B0;
   border-radius: 50%;
   border-top-color: #000;
   animation: loading .75s linear infinite;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <div class="modal-body">
          <div class="d-flex justify-content-center">
              <div class="feedback-position sending-message-spinner">
              </div>
            </div>
            <p>type your message: </p>
            <Textarea> </textarea>
            <button id='sendBtn' type="button" class="btn btn-primary">Send Message</button>
        </div>
      </div>
    </div>
  </div>
  
</div>

</body>
</html>

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

您可以向 CSS 添加一个类，并在单击按钮时让您的 JS 调用它。我添加到 CSS .myClass 并在其中设置不透明度，然后在 JS 中使用 $("#myModal").addClass('myClass'); 调用它，以便在单击按钮时将该类添加到 myModal。见这里：

更新：这里我在myModal 中使用了一个覆盖 div，这将使模式变灰而不使其透明。

$("#sendBtn").click(function() {
  $("#overlay").show();
  $('.sending-message-spinner').show();
      setTimeout(function () {
        $("#myModal").modal("hide");
    }, 2000);
});

textarea {
  width: 100%;
  height: 80px;
}

@keyframes loading {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.sending-message-spinner {
  position: fixed;
  text-align: center;
  z-index: 20;
  display: none;
  width: 64px;
  height: 64px;
  border: 8px solid #B0B0B0;
  border-radius: 50%;
  border-top-color: #000;
  animation: loading .75s linear infinite;
}

#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 10;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>
  
  <div class="modal" id="myModal">
  <div id="overlay"></div>
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <div class="modal-body">
          <div class="d-flex justify-content-center">
              <div class="feedback-position sending-message-spinner">
              </div>
            </div>
            <p>type your message: </p>
            <Textarea> </Textarea>
            <button id='sendBtn' type="button" class="btn btn-primary">Send Message</button>
        </div>
      </div>
    </div>
  </div>
  
</div>

</body>
</html>

【讨论】：

谢谢，我试过了，但改变不透明度看起来不正确......因为在几乎所有现实世界的场景中，如果不透明度设置为，模态背后还有其他元素将通过模态出现0.5.
哥奇亚。我更新了我的答案以添加一个覆盖 div 将其变灰而不是更改不透明度。请看看我更新的答案。
谢谢你...我虽然使用 jQuery 的 show() 方法来显示叠加层更容易，但希望你不介意我在你的答案中更新这个。