How do I steal the click event from an element?

Question

Long-story-short: I'm trying to make Bootstrap's modal window visible when the page loads.

I copied a bit of HTML from W3Schools.

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

The code is for how to make a modal window, but instead of having it trigger when the button element is clicked, I want it to trigger when the page loads and to get rid of the button entirely. Of course, one way to do this is to hide the button and piggyback off its click event, like:

<button id="the-button" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" style="display:none;">Open Modal</button>
<script type="text/javascript">
     $(function() { $('#the-button').click(); });
</script>

I'd rather just delete the button from the HTML and have the same thing happen on page load that happens when the button is clicked.

I've looked at event listeners in Google Chrome's inspector but I don't know how to use it to extract the click function. It has information about the function, but not the functionality itself.

Answer 1

Here is a possible solution: https://jsfiddle.net/99x50s2s/60/

You don't need a separate button. Just call the modal('show') function as shown below,

var modalDialog = $('#myModal');
modalDialog.modal('show');

Answer 2

Checkout the show attribute which is true by default.

So you could just:

<script>
$(function() {
    $('#myModal').modal();
});
</script>

Answer 3

In jQuery there is also an event load(). You don't have to steal the click event, you just fire your function when the page is loaded:

$( window ).load(function() {
    $( "#myModal" ).modal();
});

Or you can even use:

$( document ).ready(function() {
    $( "#myModal" ).modal();
});