Recently, I've taken up coding as a hobby. However, I've encountered an issue with my modal not popping up on page load. Strangely, it works perfectly fine when I open a blank document but fails to load on my friend's homepage. I am using Dreamweaver CC for this project.
Here is the HTML code:
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Update</h2>
</div>
<div class="modal-body">
<h3>Hello There! We are currently closed today due to system upgrades. Please bear with us as we work tirelessly to improve our services. Your satisfaction and convenience are our top priorities, and we appreciate your ongoing support and patience.</h3>
<h3>For live updates and menu options, follow us on Facebook.com/TheHumbleRoot and Instagram @humble_root. Thank you for your understanding and cooperation. We aim to resume operations promptly.</h3>
</div>
<div class="modal-footer">
<h3>Thank you for your patience.</h3>
</div>
</div>
</div>
And the CSS code:
/* The Modal (background) */
.modal {
display: block;
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 */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0;
}
to {
top: 0;
opacity: 1;
}
}
...
Lastly, here is the JavaScript code:
// Get the modal
var modal = document.getElementById('myModal');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// 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";
}
}