This modal is functioning perfectly, and now I want to replicate the same modal three times on a single page. I require three distinct buttons on the same page to trigger these separate modals. At this point, I am unsure which attributes need modification in order to accomplish this.
Below is the code within the body (CTA Button):
<!-- Trigger the modal with a button -->
<button id="modal-btn" class="button"> LEARN MORE</button>
This is the code for the Modal...
<!-- JQUERY SCRIPT -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- BEGIN CSS STYLES -->
<style>
.modal {
display: none;
position: fixed;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color: white;
background-color: rgba(0, 0, 0, 0.5);
overflow: scroll;
}
.modal-content {
position: relative;
padding: 10px;
margin: auto;
width: 75%;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;
}
.close-btn {
float: right;
padding-right: 50px;
color: lightgray;
font-size: 24px;
font-weight: bold;
}
.close-btn:hover {
color: darkgray;
}
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
.button {
background-color: #04347b; /* Blue */
border: none;
color: white;
padding: 12px 80px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>
<!-- END CSS STYLES -->
<!-- BEGIN MODAL -->
<div class="modal">
<div class="modal-header">
<span class="close-btn">×</span>
</div>
<div class="modal-content">
<div class="col-sm-12 col-md-12" style="background-color: white; padding: 25px 50px;">
<div class="col-sm-12 col-md-12"><h2>Physiotherapy</h2></div>
<!--PRODUCT 1-->
<div class="col-sm-2 col-md-2" style="padding:10px 0;"><img src="{{media url=wysiwyg/images-test-1.png}}" alt="" /></div>
<div class="col-sm-4 col-md-4" style="padding:10px 0; text-align: left;">
<p><strong>PRODUCT TITLE 1<br>
Ref: xxxxxxx</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!--END PRODUCT 1-->
...
</div>
</div>
</div>
<!-- END MODAL -->
<!-- BEGIN SCRIPT -->
<script type="text/javascript">
let modalBtn = document.getElementById("modal-btn")
let modal = document.querySelector(".modal")
let closeBtn = document.querySelector(".close-btn")
modalBtn.onclick = function(){
modal.style.display = "block"
}
closeBtn.onclick = function(){
modal.style.display = "none"
}
window.onclick = function(e){
if(e.target == modal){
modal.style.display = "none"
}
}
</script>
<!-- END SCRIPT -->
<!-- BEGIN SCRIPT -->
<script type="text/javascript">
$('.modal').click(function(){
$('.modal').show();
$('body').css("overflow", "hidden");
});
</script>
<!-- END SCRIPT -->