Bootstrap launching a modal by windows.onload provokes “function not found” error

Question

Actually I am trying to get this code to run under bootstrap 5.0.0 alpha, with tthe example given in the bootstrap 5 documentation. As it didn't work I tried it with the current bootstrap 4 version, and one of the examples in the bootstrap 4 documentation. Both times I am hitting the same error message:

Uncaught TypeError: myModal.show is not a function at window.onload (cookieModal.php:180)

I put the example from the boostrap 4 site in a basic bootstrap code and added the script with the window.onload function to trigger the modal after the site has been loaded:

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Bootstrap 4 Starter Template</title>
  </head>
  <body>
    <h1>Hello</h1>

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
      Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <script type="text/javascript">

    window.onload = function(){
       var myModal = document.getElementById('exampleModal');
       myModal.show();
    }

    </script>

  </body>
</html>

The error is the same in Bootstrap 5 alpha as in Bootstrap 4. In both cases when you press the button at least the modal appears.

As boosttrap 5 has abandonned jQuery I am not interested in a jQuery solution. I would prefer to launch the modal with window.onload.

I had inserted an alert after the var myModal declaration and it shows that myModal is a DIV element. So at least myModal seems to find the id for exampleModal.

Thank you in advance Gunther

MonacoCoder MonacoCoder · Accepted Answer · 2020-08-04T15:07:34

After another week of googling I found the answer in Bootstrap V5 manually call a modal myModal.show() not working (vanilla javascript)

window.onload = function(){
   var myModal = new bootstrap.Modal(document.getElementById('exampleModal'));
   myModal.show();
}

works !!!

Bootstrap launching a modal by windows.onload provokes “function not found” error

1 Answers