The below code is popping up a table when we hover the mouse on the text. Instead can we make it clickable and then pops up a table with a cancel button at the top right (so that when we click on cancel, the table disappears).

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <table id="t1">
      <tr>
        <th id="q">Quon</th>
        <th id="q1">SE</th>
        <th id="q2">SE</th>
        <th id="q3">SE</th>
        <th id="q4">SETY</th>
      </tr>
      <tr id="df3">
        <th id="i1">Ict</th>
        <td id="i2">as</td>
        <td id="i3">ds</td>
        <td id="i4">fd</td>
        <td id="i5" rowspan="2">dfd</td>
      </tr>
      <tr>
        <th id="j1">Juion</th>
        <td id="j2">How</td>
        <td id="j3">How</td>
        <td id="j4">How</td>
      </tr>
    </table>
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

This is the easyest way to make something like this in JavaScript:

function show() {
  document.getElementById("show_this").style.display = "block";
}

function hide() {
  document.getElementById("show_this").style.display = "none";
}

<button onclick="show()">Show</button>
<div id="show_this" style="display:none;">
  <button onclick="hide()">Cancel</button>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

(You just need to add onclick="show()" and onclick="hide()" attributes to your tags.

CodePudding user response：

1. You need to add a <button> for closing. I positioned it fixed at the top right of the screen.
2. You need to add a class to display element such as .d-block and use within CSS: display: block;
3. You need to add the onclick attribtue to fire a script to the button and the element .dropdown
4. To show an element you use document.querySelector('.class-name or #id or tagName').classList.add('d-block');
5. To hide an element, you use the same function just use .remove instead of .add

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
}

.close-btn {
  display: none;
  position: fixed;
  top: 5px;
  right: 10px;
}

.d-block {
  display: block;
}

<button class="close-btn" onclick="document.querySelector('.dropdown-content').classList.remove('d-block'); document.querySelector('.close-btn').classList.remove('d-block');">Click to close</button>
<div class="dropdown" onclick="document.querySelector('.dropdown-content').classList.add('d-block'); document.querySelector('.close-btn').classList.add('d-block');">
  <span>Click me</span>
  <div class="dropdown-content">
    <table id="t1">
      <tr>
        <th id="q">Quon</th>
        <th id="q1">SE</th>
        <th id="q2">SE</th>
        <th id="q3">SE</th>
        <th id="q4">SETY</th>
      </tr>
      <tr id="df3">
        <th id="i1">Ict</th>
        <td id="i2">as</td>
        <td id="i3">ds</td>
        <td id="i4">fd</td>
        <td id="i5" rowspan="2">dfd</td>
      </tr>
      <tr>
        <th id="j1">Juion</th>
        <td id="j2">How</td>
        <td id="j3">How</td>
        <td id="j4">How</td>
      </tr>
    </table>
  </div>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>