Bootstrap 3, data-show not working

Question

I'm using the modal-plugin supported by Bootstrap 3 (http://getbootstrap.com/javascript/#modals) with the following mark-up:

<div class=​"modal fade" id=​"login_modal" tabindex=​"-1" role=​"dialog" aria-labelledby=​"myModalLabel" aria-hidden=​"true" data-show=​"true">​…​</div>​

According to the documentation this should work with the data-show attribute.. Unfortunately the modal won't show automatically when the page finished loading. I don't see anything wrong here so I hope one of you guys could spot the problem for me please.

P.S.: I also found an similar existent but already closed issue they had with modals which seem to have been rewritten in v3 so I don't think it's up-to-date (https://github.com/twbs/bootstrap/issues/5891).

EDIT What I forgot to mention is that I included bootstrap of course. With a button to open and close it, it works just fine. :) It's really just the data-show attribute not doing what it's supposed to

Answer 1

It's actually not a bug because the documentation says:

Shows the modal when initialized.

Therefore you need to initialize your Modal "manually" by JS:

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

Answer 2

If data-show="true", then when you call $('.modal').modal(), the modal shows up. But if data-show="false", $('.modal').modal() doesn't work, you need to call $('.modal').modal('show') instead.