javascript - How do I steal the click event from an element? -

long-story-short: i'm trying make bootstrap's modal window visible when page loads.

i copied bit of html w3schools.

<!-- trigger modal 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 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 how make modal window, instead of having trigger when button element clicked, want trigger when page loads , rid of button entirely. of course, 1 way hide button , piggyback off 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 delete button html , have same thing happen on page load happens when button clicked.

i've looked @ event listeners in google chrome's inspector don't know how use extract click function. has information function, not functionality itself.

here possible solution: https://jsfiddle.net/99x50s2s/60/

you don't need separate button. call modal('show') function shown below,

var modaldialog = $('#mymodal'); modaldialog.modal('show');