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

so you are saying that you want to launch the modal again on Click for instruction button? because both the buttons, footer close and X on the top is working as expected? what you exactly want? — Atul Rajput
– Atul Rajput, Commented Jul 27, 2020 at 10:28
yes i do want to launch it again as user clicks on new instructions .but it's not working . — Giriteja Bille
– Giriteja Bille, Commented Jul 27, 2020 at 10:33

Wolfetto · Accepted Answer · 2020-07-27 10:36:28Z

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>

answered Jul 27, 2020 at 10:36

Wolfetto

1,20010 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Atul Rajput · Accepted Answer · 2020-07-27 10:37:18Z

1

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:

data-target
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.

answered Jul 27, 2020 at 10:37

Atul Rajput

4,1962 gold badges14 silver badges25 bronze badges

Comments

Haseeb AV · Accepted Answer · 2020-07-27 10:37:35Z

1

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);
});

});

answered Jul 27, 2020 at 10:37

Haseeb AV

363 bronze badges

Collectives™ on Stack Overflow

Bootstrap modal is not working after javascript function declaration

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related