K.Denn K.Denn - 3 days ago 5
Javascript Question

Having Multiple Modals per page

I'm creating a website where the user can click on an image to open a modal with menu items within, while the first modal works fine, subsequent modals do not.

JS Code:

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

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

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


HTML where its used:

<div class="col-md-3">
<h2>Starters</h2>
<img src="http://foodnetwork.sndimg.com/content/dam/images/food/fullset/2007/2/9/0/ie0102_coleslaw.jpg" height="100%" width="100%" id="myImg">
<!-- The Modal -->
<div id="myModal" class="modal">

<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<br>
<h2>Starters</h2>
</div>
<div class="modal-body">
<p><b>PRODUCT <span style="display:inline-block; width: 75%;"></span> PRICE</b></p>
<hr>
<p> Humus <span style="display:inline-block; width: 78%;"></span> £3.00</p>
<p> Dolma <span style="display:inline-block; width: 78%;"></span> £3.20</p>
<p> Coleslaw <span style="display:inline-block; width: 77%;"></span> £1.50</p>
<p> Prawn Cocktail <span style="display:inline-block; width: 73.5%;"></span> £4.60</p>
</div>

</div>

</div>

</div>

<div class="col-md-3">
<h2>Wraps</h2>
<img src="http://harryskebabs.com/images/demo/menu-main/menu-item-large-20.jpg" height="100%" width="100%" id="myImg">

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

<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<br>
<h2>Starters</h2>
</div>
<div class="modal-body">
<p><b>PRODUCT <span style="display:inline-block; width: 75%;"></span> PRICE</b></p>
<hr>
<p> Chicken Wrap <span style="display:inline-block; width: 78%;"></span> £3.00</p>
<p> Doner Wrap <span style="display:inline-block; width: 78%;"></span> £3.20</p>
<p> Shish Wrap <span style="display:inline-block; width: 77%;"></span> £1.50</p>
<p> Kofte Wrap <span style="display:inline-block; width: 73.5%;"></span> £4.60</p>
</div>

</div>

</div>

</div>


The first modal box shown will work as expected, while the second will not show at all, i would rather not have to unnecessarily replicate JavaScript if i don't have to, which is why i tired this method.

Very new to JS and modal boxes, so any input would be appreciated, thanks.

Answer

The modal in modal.style.display = none refers to an element with the id of "Modal". You have two elements which have this but ids given to HTML elements need to unique.

This goes for all ids, so you'll have to change give your images unique ids too.

Comments