Question

I am trying to make a small dashboard that I can check every morning to give me an easy way to tell if something failed the night before. The basic idea is for it to be flex divs with 2 in each row.

I don't play with HTML or JavaScript a lot. I was trying to use pure JS to make a div appear like a popout but I was having issues with z-index and flex divs so I am trying to use some JQuery to make things easier for me.

The idea is that each of those blocks is hiding a 'details' div that has more information. Clicking on those boxes is supposed to display the test of that div as a dialog.

I can get one working just fine. My issue is trying to get all of the dialogs initialized so that I can click to open them at me leisure. After reading on how to properly initialize dialogs I tried to implement it.

My issue is that I get no response or feedback from this so I do not know what I am doing incorrectly.

$(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

如何使用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 /朴素的javascript人，我仍然猜测你需要独特的id才能使你的jQuery对话框起作用：

creating-multiple-instances-of-dialog-box

Answer 2

我认为它适合你：

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

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

2 个答案: