Multiple Modals?

How do i transform this single logic modal to multiple modals?
i want to create multiple buttons and each button, opens a different modal. using vanilla javascript

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
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:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;

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


// 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() { = "block";

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

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if ( == modal) { = "none";


Can you please explain a little more about what you are trying to do? What exactly do you mean by ‘multiple modals’?

i want to create multiple buttons and each button, opens a different modal

If the modals are basically just going to have different text in them, then I would suggest you reuse the current modal you have now. Create a function that activates the modal and pass in the text you want to display in the modal.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.