Clever Geek Handbook

How can I create a dialog for each of several divs?

I'm trying to make a small dashboard that I can check every morning to give me an easy way to tell that something failed the day before. The basic idea is for it to be flexible divs with 2 on each line.

Example of a DBA dashboard

I don't play with HTML or JavaScript much. I tried to use pure JS to make the div look like a popout, but I had problems with z-index and flex divs, so I'm trying to use JQuery to make my job easier.

The idea is that each of these blocks hides a "detail" div that has more information. Clicking on these fields should render this div validate as a dialog.

I can get it to work fine. My problem is to initialize all dialog boxes so that I can click to open them at my leisure. After reading on how to properly initialize dialogs , I tried to implement it.

My problem is that I am not getting an answer or feedback from this, so I don’t know what I am doing wrong.

$(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>
Run codeHide result


For violinists

+3


source to share


2 answers


How about using CSS hover and transform

Updated violin

#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>
Run codeHide result




As a side note, and I'm more JavaScript / javascript-like, I still assume you need a unique id

one in order for your jQuery dialogs to work:

+1


source


I think this will work for you:



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


source






More articles:


All Articles