Question

关于项目：

有一张桌子。在此表中，我有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

直接弹出模态，因为您没有在模态上使用适当的[['x1', 'x2', 'x3'], ['x1', 'x2', 'y3'], ['x1', 'y2', 'x3'], ['x1', 'y2', 'y3'], ['y1', 'x2', 'x3'], ['y1', 'x2', 'y3'], ['y1', 'y2', 'x3'], ['y1', 'y2', 'y3']]函数。这是固定代码：

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; }

Answer 2

在您的HTML代码中，modalBox位于backWall内部。

在第一次单击时，将它们都显示出来。
当您单击关闭按钮或后壁时，您正在将display:none设置到后壁（而且，由于模态位于内部，因此它也被隐藏了）。
现在，当您再次单击“更多”时，此语句backWall.show(0);将显示后墙及其内容（包括模态）。

一种快速的解决方案是将它们全部隐藏：

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);
  }
};

https://jsbin.com/vubizelonu/edit?html,css,js,output

Answer 3

这是因为您从不隐藏模态。模态是后壁的子级。第一次显示模态后，现在可以在后墙上看到它了。因此，切换后墙现在指示模态是否显示。要获得我认为的行为，只需在隐藏后墙时隐藏模态即可。

创建“模式框”时，我无法设置时间

3 个答案: