Bootstrap modal is not working after javascript function declaration

Question

I am Working on a simple project where I want to show instructions to the user automatically and for that I created a bootstrap modal and it's working fine. Ignore the instructions

  <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">&times;</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 sake..but i don't mind if you play it <img src="https://awesomeopensource.com/favicon.ico" alt="" height="20px" width="20px"><br>
        3.So, there is red green blue colors given in some proportion out of 255 in the format rgb(red,green,blue)
       <br> 
       3. You have to guess the color which is obtained by mixing above proportianate colors 
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
       </div>
    </div>
  </div>
</div>

But I tried to show the modal as the user open the website,so i wrote a simple javascript function to display and hide the modal by using setTimeOut function

  $(document).ready(function(){
setTimeout(function(){
$('#modal1').modal("show");
setTimeout(function(){
$('#modal1').modal("hide");
},10000);
},3000);
});

The problem arises after the modal is closed automatically and when i click on the button on the footer of modal. It's not working. You can check the functionality of the code here here is the website

Answer 1

You don't bind well the id of the modal with the button "click for the instructions".

Change exampleModalCenter in data-target value with modal1 .

So, you should have:

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#modal1">
Click For Instructions
</button>

Answer 2

by Checking the code you have applied on git project,

you are making a small mistake there,

For BS modal to launch it needs 2 attribute son button:

1. data-target
2. data-toggle

in data-target you need to paas the ID of the modal, in your case that id is wrong, you can try one of these either change the data-target="#modal1"

or

id of modal to id="exampleModalCenterTitle"

That's all you need to do.

Answer 3

Problem is with your button

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModalCenter">
    Click For Instructions
  </button>

change the target attribute value with your modal id '#modal1'

and also you can use the following js

$(document).ready(function(){

setTimeout(function(){
    $('#modal1').modal("show");
},3000);

$('#modal1').on('shown.bs.modal', function () {
    setTimeout(function(){
        $('#modal1').modal("hide");
    },1000);
});

});