Launch Bootstrap Modal on Page Load

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>

You don't need javascript to show modal

The simplest way is replace "hide" by "in"

class="modal fade hide"

so

class="modal fade in"

and you need add onclick = "$('.modal').hide()" on button close;

PS: I think the best way is add jQuery script:

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

Just add the following-

class="modal show"

Working Example-

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script><script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><div class="container">  <!-- Trigger the modal with a button -->  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>  <!-- Modal -->  <div class="modal show" id="myModal" role="dialog">    <div class="modal-dialog">          <!-- Modal content-->      <div class="modal-content">        <div class="modal-header">          <button type="button" class="close" data-dismiss="modal">×</button>          <h4 class="modal-title">Modal Header</h4>        </div>        <div class="modal-body">          <p>Some text in the modal.</p>        </div>        <div class="modal-footer">          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>        </div>      </div>          </div>  </div>  </div>