How to always display Bootstrap 3 modal?

Question

Bootstrap 3 modals are hidden by default. To launch them I have to click a trigger button:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

JSFiddle

I have tried the following but it has no effect:

jQuery(window).load(function(){
    jQuery('#myModal').modal('show');
});

How can I ensure my modal is always displayed on screen? i.e. I don't want the user to have to manually display it by clicking on the trigger button. I don't want them to be able to close it either. I'd like it to remain open at all times.

Solution 1

Here is the updated fiddle where users can't close the model but you need to remove the html elements for close buttons cuz thats very evil for your users :P

jQuery(window).load(function(){
    jQuery('#myModal').modal('show').on('hide.bs.modal', function(e){
      e.preventDefault();
    });
});

http://jsfiddle.net/95Vf7/2/

Solution 2

Everything you asked is perfectly described in the docs.

Displayed on screen

Shows the modal when initialized.

$("#my-modal").modal({ show : true });

I don't want them to be able to close it either

Closes the modal when escape key is pressed And Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.

$("#my-modal").modal({
    backdrop : "static",
    keyboard: false
});

Comments

[henrywright]

This didn't work for me, then I realised the typo 'model' might have been why. Thanks for your help.

[Luke]

Btw: Remember to use when ever possible the public api that are suggested by the frameworks creator. the other answer that you marked as "answer" actually does not use those apis and just prevents default behaviour. Just saying :)

[Luke]

Hey @Prashank is there a reason why you don´t use the suggested options from the bootstrap docs?

[henrywright]

Sure will do. Just +1'd your answer as it makes use of Bootstrap functionality

[Luke]

But you know, that in the future there will be other people that will eventually find this too and will then use the answer that you marked as the correct answer, even though there is a more correct one? :)

[Prashank]

Code is more streamlined and tackles every possible way to close the modal at once. The bootstrap plugin is just a plugin itself, so i see no problem why this isn't a good way.

[Prashank]

@Luke have you tested this?

[Luke]

what do you mean with tested ? It is the official documentation.

[joshhunt]

IMO this is a much better solution that using "e.preventDefault();"