Modal onload in page Bootstrap 3

Question

I would like to know how do I make modal automatic when the index page is triggered?

I would like to open one modal index came on the screen, what should I change in bootstrap 3 to come this effect?

Modal in onload window in open page.

Thanks for the help guys.

I put in the following way

I'm doing something wrong?

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

<!-- Modal -->
<div class="modal fade in" id="teste" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <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" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </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 -->

Answer 1

try:

<script type="text/javascript">
  $(document).ready(function() {
    $('#teste').modal({
      show: true,
    })
  });
</script>

Example:

 <!-- css -->
 <link href="css/bootstrap.css" rel="stylesheet" type="text/css" >
 <script src="js/jquery.js"></script>
 <script src="js/bootstrap.js"></script>

 <script type="text/javascript">
 $(document).ready(function() {
   $('#myModal').modal({
    show: true,
   })
 });
</script>

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

 <!-- Modal -->
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-     labelledby="myModalLabel" aria-hidden="true">
   <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" id="myModalLabel">Modal title</h4>
       </div>
       <div class="modal-body">
         ...
       </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 -->

Answer 2

$( document ).ready( function() {
    $( '#myModal' ).modal( 'toggle' );
});

Is that what you're looking for ?

Answer 3

Your code will actually work. The thing you are doing wrong is the placement of the javascript portion.

You simply need to put the javascript portion of your code at the bottom of your document just before the closing body tag.

I just tested your code, as is, with a long document and it fails. All I did was move your javascript to the bottom of the page and it works perfectly.

There is another stack overflow that talks about why this is a best practice in some cases (JavaScript on the bottom of the page?).

Best to you!