Html/CSS Popup Div on Text Click

HTML / CSS Popup div on text click

DEMO

In the content area you can provide whatever you want to display in it.

.black_overlay {

  display: none;

  position: absolute;

  top: 0%;

  left: 0%;

  width: 100%;

  height: 100%;

  background-color: black;

  z-index: 1001;

  -moz-opacity: 0.8;

  opacity: .80;

  filter: alpha(opacity=80);

}

.white_content {

  display: none;

  position: absolute;

  top: 25%;

  left: 25%;

  width: 50%;

  height: 50%;

  padding: 16px;

  border: 16px solid orange;

  background-color: white;

  z-index: 1002;

  overflow: auto;

}

<html>

<head>

  <title>LIGHTBOX EXAMPLE</title>

</head>

<body>

  <p>This is the main content. To display a lightbox click <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a>

  </p>

  <div id="light" class="white_content">This is the lightbox content. <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>

  </div>

  <div id="fade" class="black_overlay"></div>

</body>

</html>

How to make a pop up text show underneath a text on click instead of above the text

// When the user clicks on div, open the popup
function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}

/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  top: 130%; /* changed bottom to top */
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  bottom: 100%; /* changed top to bottom */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #555 transparent; /* changed border botom color instead of top*/
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

<body style="text-align:center">

<h2>Popup</h2>

<div class="popup" onclick="myFunction()">Click me to toggle the popup!
  <span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>

Popup div containing Textarea when clicking a table cell

You can use some custom CSS and jQuery slideToggle function to have some effects when you click on part Desc it will show the textarea.

In the textarea i have added a span which is out X button which will be used to close the textarea div when needed.

Live Demo:

$(document).ready(function() {
 //Show textarea
  $('#cell_id').click(function() {
    $('#div_id').slideToggle('slow');
  });
  
  //Close textarea
  $('#close_text').click(function() {
    $('#div_id').slideToggle('slow');
  });
});

th,
td {
  border: solid 1px lightgrey;
}

#div_id {
  display: none;
  border: 1px solid black;
  margin: 10px;
}

#div_id textarea {
  width: 400px;
  height: 300px;
  border: 3px solid #cccccc;
  padding: 5px;
  font-family: Tahoma, sans-serif;
}

#close_text {
  position: absolute;
  right: 27px;
  cursor: pointer;
  padding: 5px;
  background: #cfd0d1;
  border-radius: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>

  <style>

  </style>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

  <script>
  </script>
</head>

<body>
  <div class="left" style="margin-top:5px; border: solid #666 1px;">
    <table id="itemtable" class="" style="width: 300px; margin: 10px;">
      <thead style="color:black;">
        <tr>
          <th>Year</th>
          <th>Model</th>
          <th>Part Desc</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td> 2001</td>
          <td> Toyota</td>
          <td id='cell_id' onclick=''>test</td>
        </tr>
      </tbody>
    </table>

    <div id="div_id"><textarea name='reqnotes'>123</textarea>
      <span id="close_text" title="Click to close">X</span></div>
  </div>
</body>

</html>

How to make a pop up appear when you click a button in html

JavaScript code should be wrapped with the <script> tag. CSS code should be wrapped with the <style> tag inside the <head> tag (although not mandatory).

The HTML you should be using is this:

<html>
<head>
<style>
.center {
    margin: auto;
    width: 60%;
    padding: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.hideform {
    display: none;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center hideform">
    <button id="close" style="float: right;">X</button>
    <form action="/action_page.php">
        First name:<br>
        <input type="text" name="firstname" value="Mickey">
        <br>
        Last name:<br>
        <input type="text" name="lastname" value="Mouse">
        <br><br>
        <input type="submit" value="Submit">
    </form>
</div>
<button id="show">Show form</button>
<script>
$('#show').on('click', function () {
    $('.center').show();
    $(this).hide();
})

$('#close').on('click', function () {
    $('.center').hide();
    $('#show').show();
})
</script>
</body>
</html>

How to make pop-up text disappear after/on click?

Here is an example you might find interesting:

function toggleInfo() {

  let text = document.getElementById("akText");

  

  if(text.style.visibility === 'hidden'){

    text.style.visibility = 'visible';

  } else {

      text.style.visibility = 'hidden';

  }

  

}

.akimage {

  width: 100px;

  height: 100px;

  background-color: green;

  line-height: 100px;

  text-align: center;

}

<div class="akimage" onclick="toggleInfo()">

  click me

</div>

<span id="akText">

  AKA text,   AKA text,   AKA text,  AKA text,

</span>

Html/CSS Popup Div on Text Click