javascript - 创建 'modal box'时无法设置时间

Question

关于元素:

• 有一张 table 。在此表中，我有 3 列，分别称为“姓名”、“姓氏”和“更多”。
• 按“更多”将激活“模式框”。
• 在“模态框”框中有关于此人的更多信息。

问题

• “模态框”在首次启动时运行缓慢(500 毫秒)。那不是问题。但是当第二次按下时，它不会根据时间打开。(0ms)。为什么？

let backWall = $("#backWall");
let modal = $("#modalBox");
$(".more").click(function(){
    backWall.show(0);
    modal.show(500);
  });
$(".close").click(function(){
  backWall.hide(0);
})
window.onclick = function(event) {
  if (event.target == document.getElementById("backWall")) {
    backWall.hide(0);
  }
};

#backWall {
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(0, 0, 0, 0.25); }

#modalBox {
  display: none;
  background-color: #fff;
  z-index: 99;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 50px #262626;
  width: 60%;
  padding: 25px; }
  #modalBox .close {
    color: #aaaaaa;
    position: absolute;
    top: 5px;
    right: 25px;
    font-size: 30px;
    font-weight: bold;
    transition: .25s; }
    #modalBox .close:hover, #modalBox .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
      transform: scale(1.5);
      color: red; }

#more {
  font-size: 12px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="backWall">
      <div id="modalBox">
          <p>Some text in the Modal..</p>
          <span class="close">&times;</span>
      </div>
    </div>
  <table class="table table-striped">
      <thead class="thead-dark">
        <tr>
          <th scope="col">ID</th>
          <th scope="col">First Name</th>
          <th scope="col">Last Name</th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Furkan</td>
          <td>Gulsen</td>
          <td>
            <button id="more" class="btn btn-dark more">MORE</button>
          </td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Allen</td>
          <td>
            <button id="more" class="btn btn-dark more">MORE</button>
          </td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>Quenn</td>
          <td>
            <button id="more" class="btn btn-dark more">MORE</button>
          </td>
        </tr>
      </tbody>
    </table>

---

Answer 1

模态框直接弹出，因为你没有在模态框上使用正确的hide函数。这是固定代码:

let backWall = $("#backWall");
let modal = $("#modalBox");
$(".more").click(function(){
    backWall.show(0);
    modal.show(500);
  });
$(".close").click(function(){
  backWall.hide(0);
  modal.hide(0);
})
window.onclick = function(event) {
  if (event.target == document.getElementById("backWall")) {
    backWall.hide(0);
    modal.hide(0);
  }
};

#backWall {
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(0, 0, 0, 0.25); }

#modalBox {
  display: none;
  background-color: #fff;
  z-index: 99;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 50px #262626;
  width: 60%;
  padding: 25px; }
  #modalBox .close {
    color: #aaaaaa;
    position: absolute;
    top: 5px;
    right: 25px;
    font-size: 30px;
    font-weight: bold;
    transition: .25s; }
    #modalBox .close:hover, #modalBox .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
      transform: scale(1.5);
      color: red; }

#more {
  font-size: 12px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="backWall">
      <div id="modalBox">
          <p>Some text in the Modal..</p>
          <span class="close">&times;</span>
      </div>
    </div>
  <table class="table table-striped">
      <thead class="thead-dark">
        <tr>
          <th scope="col">ID</th>
          <th scope="col">First Name</th>
          <th scope="col">Last Name</th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Furkan</td>
          <td>Gulsen</td>
          <td>
            <button id="more" class="btn btn-dark more">MORE</button>
          </td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Allen</td>
          <td>
            <button id="more" class="btn btn-dark more">MORE</button>
          </td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>Quenn</td>
          <td>
            <button id="more" class="btn btn-dark more">MORE</button>
          </td>
        </tr>
      </tbody>
    </table>