I'm looking to enhance the functionality of the modal by adding an additional "Cancel" button at the bottom, alongside the option to close the modal using the span. I'm seeking guidance on how to proceed with this enhancement. Any suggestions would be greatly appreciated. Thank you.
<!-- The Offer Modal-->
<!-- Trigger/Open The Modal -->
<button id="makeOfferBtn">Make an Offer</button>
<!-- The Offer Modal content -->
<div id="myOfferModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<button id="cancelBtn">Cancel</button> <!-- New Cancel Button -->
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myOfferModal');
// Get the button that opens the modal
var btn = document.getElementById("makeOfferBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
var cancelBtn = document.getElementById("cancelBtn"); // Get reference to new Cancel button
// Functionality for new Cancel button
cancelBtn.onclick = function() {
modal.style.display = "none";
}
// 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>