how to create Bootstrap static modal that does NOT dissapear and loads by default

Question

Trying to create a view in codeignitor for a log in page that permanently displays a Bootstrap Modal. I am able to get the modal pop up window by adding the button, but I do not know how to get the modal to display by default when the page loads.

I copied and pasted the following from the docs but nothing shows on the page, it only shows up in the source.

<div class="modal 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 -->

score 16 · Answer 1 · edited May 23 '17 at 12:25

16

Open the modal by javascript on document ready by $('#myModal').modal('show');

Set backdrop and keyboard to false prevent the modal closing when clicking outside it.

$(function() {
$('#myModal').modal({backdrop:false,keyboard:false});
$('#myModal').modal('show');
});

$('#myModal').modal({backdrop:'static',keyboard:false, show:true});

Or set the backdrop to static, from the docs: "Alternatively, specify static for a backdrop which doesn't close the modal on click.", see also Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape?

edited May 23 '17 at 12:25

Community

1
1

answered Oct 08 '13 at 17:54

Bass Jobsen

48,736
16
143
224

The best answer! – Renan Coelho Mar 18 '19 at 16:31

score 14 · Answer 2 · edited Apr 26 '20 at 16:05

14

You can create this by removing fade and add show class to modal.

<div class="modal show">
    <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 -->

Check the Demo

edited Apr 26 '20 at 16:05

faremal

50
2
6

answered Oct 08 '13 at 10:32

Anshad Vattapoyil

23,145
18
84
132

Thankd so much for this you have no idea how much time you have saved me – jojojohn Oct 08 '13 at 10:39
What would be the cleanest way to make the area outside the modal darken in this case? – frostshoxx Mar 01 '16 at 21:31
@frostshoxx I ended up settling for a hidden button with a setTimtout click: https://jsfiddle.net/LeoTM/ajw7xh8f/5/ – Leo Aug 19 '16 at 13:28

score 4 · Answer 3 · answered Jul 07 '19 at 22:58

4

To make modal undismissable you can set backdrop static without javascript:

 <div class="modal" data-backdrop="static" ... >

Open onload using:

$('#your_modal').modal('show');

answered Jul 07 '19 at 22:58

Nowdeen

1,401
14
20

Does not work when initializing in Javascript (at least not with Bootstrap 4). You then need to pass it as option in js call – Bluesight Jul 20 '20 at 14:07

how to create Bootstrap static modal that does NOT dissapear and loads by default

3 Answers3

Check the Demo