如何为多个 div 中的每一个创建一个对话框？

Question

我正在尝试制作一个小型仪表板，我可以每天早上检查它，以便我可以轻松地判断前一天晚上是否发生了故障。基本思想是每行有 2 个 flex div。

我不经常使用 HTML 或 JavaScript。我试图使用纯 JS 使 div 看起来像一个弹出窗口，但我遇到了 z-index 和 flex div 的问题，所以我尝试使用一些 JQuery 来让事情变得更容易。

这个想法是每个块都隐藏了一个包含更多信息的“详细信息”div。单击这些框应该将该 div 的测试显示为对话框。

我可以让一个工作正常。我的问题是尝试初始化所有对话框，以便我可以在闲暇时单击打开它们。在阅读了如何properly initialize dialogs 之后，我尝试实现它。

我的问题是我没有得到任何回应或反馈，所以我不知道我做错了什么。

$(document).ready(function() {
  // Initialize all of the dialogs on this page
  $('.details').each(function() {
    $(this).dialog({
      autoOpen: false,
      width: 450,
      height: 550,
      buttons: {
        blah: function() {
          $(this).dialog("close");
        }
      }
    });
  });

  // Capture click event on all job class tables.
  $('.flex-item').click(function() {
    // look for a child element with the details class and opens its dialog
    $(this).find('.details').dialog('open');
  });
});

#container {
  width: 1050px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-content: flex-start;
}

#container .flex-item {
  background: tomato;
  padding: 5px;
  width: 500px;
  height: 80px;
  margin-top: 10px;
  z-index: 500;
  cursor: default;
}

.flex-item .job {
  font-weight: bold;
  font-size: 1.3em;
  color: white;
}

.flex-item .dataGood,
.dataBad {
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

.flex-item .details {
  background-color: white;
  visibility: hidden;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 10000;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

.flex-item .dataGood {
  background-color: green;
}

.flex-item .dataBad {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="flex-item">
    <div class="job">Title</div>
    <div class="dataGood">Date</div>
    <div class="details">This is the hidden stuff</div>
  </div>
  <div class="flex-item">
    <div class="job">NIGHTLY WHOLE BACKUP on KANOR1</div>
    <div class="dataGood">03/08/2017 20:00:00</div>
    <div class="details">This is the hidden stuff</div>
  </div>
  <div class="flex-item">
    <div class="job">DataMaint.Full Backup on KANSAGESQL</div>
    <div class="dataGood">03/08/2017 20:00:00</div>
    <div class="details">This is the hidden stuff</div>
  </div>
  <div class="flex-item">
    <div class="job">Backup Failure Error 18204 on SQL08R2VM</div>
    <div class="dataBad">03/08/2017 20:00:00</div>
    <div class="details">This is the hidden stuff</div>
  </div>
</div>

For the fiddlers

Answer 1

我认为它对你有用：

$(this).find( ".details" ).dialog( "destroy" );
  // Capture click event on all job class tables.
  $('.flex-item').click(function() {
      $(this).find( ".details" ).dialog( "instance" );
      $(this).find( ".details" ).dialog({
          height: 400
       });
  });

Answer 2

如何使用 CSS hover 和 transform

Updated fiddle

#container {
  width: 1050px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-content: flex-start;
  border: solid, 1px;
}
#container .flex-item {
  position: relative;
  background: tomato;
  padding: 5px;
  width: 500px;
  height: 80px;
  margin-top: 10px;
  cursor: default;
}
.flex-item .job {
  font-weight: bold;
  font-size: 1.3em;
  color: white;
}
.flex-item .dataGood,
.dataBad {
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

.flex-item .details {
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 8px 0;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  transform: scaleY(0);
}
.flex-item .dataGood {
  background-color: green;
}
.flex-item .dataBad {
  background-color: red;
}
.flex-item:hover {
  z-index: 10;
}
.flex-item:hover .details {
  transform: scaleY(1);
}

<div id="container">
  <div class="flex-item">
    <div class="job">Title</div>
    <div class="dataGood">Date</div>
    <div class="details">This is the hidden stuff</div>
  </div>
  <div class="flex-item">
    <div class="job">NIGHTLY WHOLE BACKUP on KANOR1</div>
    <div class="dataGood">03/08/2017 20:00:00</div>
    <div class="details">This is the hidden stuff</div>
  </div>
  <div class="flex-item">
    <div class="job">DataMaint.Full Backup on KANSAGESQL</div>
    <div class="dataGood">03/08/2017 20:00:00</div>
    <div class="details">This is the hidden stuff</div>
  </div>
  <div class="flex-item">
    <div class="job">Backup Failure Error 18204 on SQL08R2VM</div>
    <div class="dataBad">03/08/2017 20:00:00</div>
    <div class="details">This is the hidden stuff</div>
  </div>
</div>

---

作为旁注，我更像是一个 CSS/plain javascript 人，我仍然猜想你需要独特的 id 来让你的 jQuery 对话框工作：

• creating-multiple-instances-of-dialog-box