I am working on a project that involves a popup modal that needs to appear after 10 seconds. However, the issue I am facing is that the modal is currently displaying at the top of the page, but I would like it to be shown at the bottom of the page just above the footer.
Can anyone provide guidance on how to achieve this?
Below is the snippet of code I have been working with:
// Script to control the display of the modal
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close2")[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";
}
}.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="modal fade" id="popup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
...
...
</div>
</div>
</div>