how to spesify certain modals for different elements in html?

DiaaSh
September 21, 2023
91 views
0 votes
2 Answers

I am trying to add more than one modal for several elements but the codes I’m using work for one element only, and when ever I try to add more than one, they stop working, please, how is it supposed to be done? These are the HTML, CSS and JavaScript in one document:

var modal = document.getElementById("myModal");

var btn = document.getElementById("myBtn");

var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

body {font-family: Arial, Helvetica, sans-serif;}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

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

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  }

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">


</head>
<body>

<h2>Modal Example</h2>

<button id="myBtn">Open Modal</button>

<div id="myModal" class="modal">

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

</div>

</body>
</html>

I tried to add more than one modal but that didn’t work.

Answers

Did I understand correctly that you want to call a modal window by clicking on different elements? I added two more buttons, everything works.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

body {font-family: Arial, Helvetica, sans-serif;}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

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

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

<button id="myBtn" class="myBtn">Open Modal</button>
<button id="myBtn2" class="myBtn">Open Modal</button>
<button id="myBtn3" class="myBtn">Open Modal</button>

<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>Some text in the Modal..</p>
    </div>
</div>
<script language="JavaScript">

var modal = document.getElementById("myModal");

let btns = document.getElementsByClassName("myBtn");

var span = document.getElementsByClassName("close")[0];

[].forEach.call(btns, function (btn) {
    btn.addEventListener('click', function(){
        modal.style.display = "block";
    });
});


span.onclick = function() {
    modal.style.display = "none";
}

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>
</body>
</html>

Try this:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

body {font-family: Arial, Helvetica, sans-serif;}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

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

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

<button id="myBtn1" data-id="1" class="myBtn">Open Modal</button>
<button id="myBtn2" data-id="2" class="myBtn">Open Modal</button>
<button id="myBtn3" data-id="3" class="myBtn">Open Modal</button>

<div id="myModal1" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>Some text in the Modal1..</p>
    </div>
</div>
<div id="myModal2" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>Some text in the Modal2..</p>
    </div>
</div>
<div id="myModal3" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>Some text in the Modal3..</p>
    </div>
</div>
<script language="JavaScript">


let btns = document.getElementsByClassName('myBtn');
let closeBtns = document.getElementsByClassName("close");


[].forEach.call(btns, function(btn) {
    btn.onclick = function() {
        modal = document.getElementById("myModal" + btn.getAttribute('data-id'));
        if (modal) {
            modal.style.display = "block";
        }
    };
});

[].forEach.call(closeBtns, function(span) {
    span.onclick = function() {
        let parentModal = this.closest(".modal");
        if (parentModal) {
            parentModal.style.display = "none";
        }
    };
});

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>
</body>
</html>

Add your buttons data-id with number, which pespond modal window id. For example data-id="1" will open myModal1

Please signup or login to give your own answer.

Click here to cancel reply.