Launch Bootstrap Modal on Page Load

by

Just wrap the modal you want to call on page load inside a jQuery load event on the head section of your document and it should popup, like so:

JS

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

HTML

<div class="modal hide fade" id="myModal">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

You can still call the modal within your page with by calling it with a link like so:

<a class="btn" data-toggle="modal" href="#myModal">Launch Modal</a>

More Related Contents:

  1. Datepicker validation 18 years of age [closed]
  2. Should the Bootstrap media queries be saved in a css file or a js file?
  3. Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink
  4. How can I capture the right-click event in JavaScript? [duplicate]
  5. Resize event for textarea?
  6. Changing nav-bar color after scrolling?
  7. HTML “overlay” which allows clicks to fall through to elements behind it [duplicate]
  8. Bootstrap close responsive menu “on click”
  9. Pass mouse events through absolutely-positioned element
  10. Attach a body onload event with JS
  11. Attach an event in a child iframe to a handler in the parent window
  12. Bootstrap 4 navbar not collapsing on large screen
  13. How to partition input field to appear as separate input fields on screen?
  14. event.offsetX in Firefox
  15. How to create a responsive image that also scales up in Bootstrap 3
  16. how to move a div with arrow keys
  17. How to change active class while click to another link in bootstrap use jquery?
  18. jQuery Change event on an element – any way to retain previous value?
  19. Bootstrap dropdown closing when clicked
  20. Handling “onclick” event with pure JavaScript
  21. bootstrap popover not showing on top of all elements
  22. How can I stop an onclick event from firing for parent element when child is clicked?
  23. Bootstrap Dropdown with Hover
  24. Knockout + Bootstrap 3 Radio Buttons
  25. How to add smooth scrolling to Bootstrap’s scroll spy function
  26. script order for jquery with bootstrap
  27. Fire oninput event with jQuery
  28. How to slide nav bar from left instead from top?
  29. Bootstrap Dropdown menu is not working
  30. Replacement for deprecated `keypress` DOM event

Leave a Comment