0

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/tether@1.2.4/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/gijgo@1.9.6/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>
Geoff_S
  • 4,917
  • 7
  • 43
  • 133

4 Answers4

2

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

joshmoto
  • 4,472
  • 1
  • 26
  • 45
  • I still can't get it, regardless of IDs. Can you see an issue in my includes? – Geoff_S Jul 24 '18 at 12:24
  • Like I say i just used your code as is in jsfiddle with the bootstrap 4 and jquery framework. And it works, so there must be an error your side perhaps or your not loading the jquery or js properly. Does any other bootstrap js components work on your page? – joshmoto Jul 24 '18 at 12:26
  • I'm using chrome and the modal launches for me in the jsfiddle. https://imgur.com/a/wtVejF1 – joshmoto Jul 24 '18 at 12:28
  • Everything else, bootstrap and JS, works fine. But that's what's weird because when I load your fiddle it doesn't show either – Geoff_S Jul 24 '18 at 12:28
  • What browser you using? – joshmoto Jul 24 '18 at 12:30
  • chrome and firefox – Geoff_S Jul 24 '18 at 12:31
  • So weird that the fiddle doesn't work for you. Not really sure man. Keep digging. Try setting up a basic raw test modal from the bs modal docs https://getbootstrap.com/docs/4.1/components/modal/ – joshmoto Jul 24 '18 at 12:34
  • So use php to include my menu file, and when I remove t his it works – Geoff_S Jul 24 '18 at 12:40
1

The Id you are using is wrong. Try this:

$('#my_modal').modal('show');
Martin I
  • 35
  • 7
0

There is a spelling mistake

its "#my_modal" not "#my_Modal"

 <script type="text/javascript"> 
    $(window).load(function(){
    $('#my_modal').modal('show');
    }); 
 </script>
charan kumar
  • 2,119
  • 2
  • 20
  • 26
  • It's still not loading for some reason. Is there an issue in the order of my includes? – Geoff_S Jul 24 '18 at 12:24
  • try placing teather.min.js below the jquery-3.3.1.min.js and also try "on" function like $(document).on('load', function(){ $('#my_modal').modal('show'); }); – charan kumar Jul 24 '18 at 12:26
  • Ok so I include my menu.php file on every page. When I remove it works – Geoff_S Jul 24 '18 at 12:44
0

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:
sanoj lawrence
  • 951
  • 5
  • 29
  • 69
  • do you get any error in console, does you firewall allow `CDN` try opening https://code.jquery.com/jquery-3.3.1.min.js – sanoj lawrence Jul 24 '18 at 12:32
  • No but I may have found the issue. I'm using startblocks and endblocks in order to template the page with my included menu. When I remove those it works – Geoff_S Jul 24 '18 at 12:37