I have been working on a project where I need to display instructions to the user automatically. To achieve this, I have created a bootstrap modal which is functioning perfectly.
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">How to Play?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
1. This game is created for fun, play it with your friend or enemy or whomever you want <br>
2. Basically, this game is for my resume's sake, but feel free to play it <img src="https://awesomeopensource.com/favicon.ico" alt="" height="20px" width="20px"><br>
3. So, there are red, green, and blue colors given in some proportion out of 255 in the format rgb(red,green,blue)
<br>
4. You have to guess the color which is obtained by mixing the above proportionate colors
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I attempted to show the modal as soon as the user opens the website by writing a simple JavaScript function that displays and hides the modal using the setTimeout function.
$(document).ready(function(){
setTimeout(function(){
$('#modal1').modal("show");
setTimeout(function(){
$('#modal1').modal("hide");
},10000);
},3000);
});
The issue arises after the modal closes automatically and when I click on the button on the footer of the modal. It does not seem to be working. You can test the functionality of the code here on the website.