Display This Bootstrap Modal on Page Load

Question

I have the following Bootstrap modal...

HTML:

<div id="tallModal" class="modal modal-wide fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

CSS:

.modal.modal-wide .modal-dialog {
  width: 90%;
}
.modal-wide .modal-body {
  overflow-y: auto;
}

JS:

$(".modal-wide").on("show.bs.modal", function() {
  var height = $(window).height() - 200;
  $(this).find(".modal-body").css("max-height", height);
});

Here it is on CodePen: https://codepen.io/TomAshley/pen/wPxBjB

How can I get the modal to display as soon as the page loads? My attempt of this is using window.load as you can see here:

$(window).load("show.bs.modal", function() {
        var height = $(window).height() - 200;
        $(this).find(".modal-body").css("max-height", height);
    });

But it doesn't popup the modal. How to make it pop on page load?

I didn't think I was supposed to use the id for my example. That's why I asked. — xendi, Nov 25 '17 at 13:33

score 4 · Accepted Answer · answered Nov 25 '17 at 13:15

4

Trigger the modal programatically

$(document).ready(function() {
  $('#tallModal').modal('show');
});

Here is the pen

answered Nov 25 '17 at 13:15

ztadic91

2,774
1
15
21

Or it can be `$('.modal-wide').modal('show');` , right? Thanks – xendi Nov 25 '17 at 13:24
yes, you changed only the selector but it matches the same element, id(#) is safer – ztadic91 Nov 25 '17 at 13:26
For some reason in my design when I add this, the modal width is much smaller. Any idea how can I prevent that? – xendi Nov 25 '17 at 13:27

score 0 · Answer 2 · answered Nov 25 '17 at 13:17

0

For this scenario we can use

$( document ).ready(function() {
   var height = $(window).height() - 200;
   $(this).find(".modal-body").css("max-height", height);
}

answered Nov 25 '17 at 13:17

thiyagu selvaraj

100
4

1

This doesn't answer the question... – Matt Fletcher Nov 25 '17 at 14:43

Display This Bootstrap Modal on Page Load

2 Answers2