CODEWITHSUNDEEP
javascriptjquerybootstrap-4pageload
Geoff_S
Geoff_S

Reputation: 5107

Bootstrap modal won't open on page load

I have a modal that I am successfully opening with a button:

<button onclick="content()" data-toggle="modal" data-target="#my_modal">Save</button>

<form action="addPage.php" method="post">
  <div class="modal fade" id="my_modal" tabindex="-1" role="dialog" aria-labelledby="savePageLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="savePageLabel">Page Details:</h5>
        </div>
      </div>
    </div>
  </div>
</form>

But I'm trying to have it open on page load instead and it won't work:

<script type="text/javascript"> 
$(window).load(function(){
$('#my_Modal').modal('show');
}); 
</script>

I feel like it should be the right syntax and everything, but I can't understand why the button will open it but page load and document.ready won't?

UPdate:

My includes

  <script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="instafeed.js-master/instafeed.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment-with-locales.js"></script>
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/gijgo.min.js" type="text/javascript"></script>
    <script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>

Upvotes: 0

Views: 3181

Answers (4)

joshmoto
joshmoto

Reputation: 5088

Your code works, even with the wrong ID (capital M).

See your code working (chrome)... https://jsfiddle.net/joshmoto/njd7vuLx/

Are you loading the bootstrap js and query properly?

Your code...

$(window).load(function(){
    $('#my_Modal').modal('show');
});

Screenshot of the jsfiddle working for me with your original code.

enter image description here

Upvotes: 2

sanoj lawrence
sanoj lawrence

Reputation: 993

Try this....

$(window).on('load',function(){
        $('#my_modal').modal('show');
    });
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.min.js"></script>

<button onclick="content()" data-toggle="modal" data-target="#my_modal">Save</button>

<form action="addPage.php" method="post">
  <div class="modal fade" id="my_modal" tabindex="-1" role="dialog" aria-labelledby="savePageLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="savePageLabel">Page Details:</h5>
        </div>
      </div>
    </div>
  </div>
</form>
But I'm trying to have it open on page load instead and it won't work:

Upvotes: 0

charan kumar
charan kumar

Reputation: 2157

There is a spelling mistake

its "#my_modal" not "#my_Modal"

 <script type="text/javascript"> 
    $(window).load(function(){
    $('#my_modal').modal('show');
    }); 
 </script>

Upvotes: 0

Martin I
Martin I

Reputation: 45

The Id you are using is wrong. Try this:

$('#my_modal').modal('show');

Upvotes: 1

Related Questions