CODEWITHSUNDEEP
javascripthtmlcssmodal-dialog
John
John

Reputation: 72

How to pass data to normal CSS/JS modal

I am working with this CSS/JS modal and I wanted to know is there any way to pass data to modal like we do using data-toggle in bootstrap modal.

I am going to use this inside PHP while loop so that different buttons will get printed and I want to pass data to modal after clicking on that button so data associated with that row will be passed to the modal or printed on the button after click.....

Is it possible to do with such type of modals?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
</style>
</head>
<body>

<h2>Modal Example</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

</body>
</html>

Upvotes: 2

Views: 917

Answers (1)

kosmos
kosmos

Reputation: 4288

You can just add data-* attributes to your modal's main container and use it later.

<div id="myModal" class="modal" data-foo="bar"> <!-- ... --> </div>

// Get the modal
var modal = document.getElementById("myModal");

/*...*/

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";

    // append data-foo value to the modal's content
    modal.querySelector('.modal-content p').innerText = modal.dataset.foo;
}

Here's an example of how datasets work: https://codepen.io/kmsdevnet/pen/ExggvyP

dataset documentation: https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/dataset

Upvotes: 1

Related Questions