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

Question

我正在尝试制作一个我可以每天早上检查的小型仪表板，以便让我轻松判断前一天晚上是否出现故障。基本思想是将它设为 flex divs，每行 2 个。

我不怎么玩 HTML 或 JavaScript。我试图使用纯 JS 使 div 看起来像弹出窗口，但我遇到了 z-index 和 flex divs 的问题，所以我试图使用一些 JQuery 来制作事情对我来说更容易。

这个想法是，每个块都隐藏了一个 'details' 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 悬停和 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

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

How can I make a dialog for each of multiple divs?

html

css

jquery

jquery-ui

flexbox