Inicie el modo Bootstrap en la carga de la página

No sé javascript en absoluto. La documentación de bootstrap dice que

Llame al modal a través de javascript: $ ('# myModal'). Modal (opciones)

No tengo idea de cómo llamar a esto en una carga de página. Utilizando el código suministrado en la página de arranque, puedo llamar con éxito al modal con un clic de elemento, pero quiero que se cargue inmediatamente en una carga de página.

Simplemente envuelva el modal al que desea llamar en la carga de la página dentro de un loadevento jQuery en la sección principal de su documento y debería aparecer, de esta manera:

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>

Todavía puede llamar al modal dentro de su página con un enlace como este:

<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>

No necesitas javascriptmostrar modal

La forma más simple es reemplazar "ocultar" por "en"

class="modal fade hide"

entonces

class="modal fade in"

y necesitas agregar onclick = "$('.modal').hide()"el botón cerrar;

PD: Creo que la mejor manera es agregar script jQuery:

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

Solo agregue lo siguiente:

class="modal show"

Ejemplo de trabajo

<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">&times;</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>

Puedes probar este código ejecutable

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

<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 fade" 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">&times;</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>

Más se puede encontrar aquí .

Creo que tienes tu respuesta completa.

con respecto a lo que dice Andre's Ilich, debe agregar el script js después de la línea en lo que llama jquery:

<script src="content/bootstrapJS/jquery-2.1.1.min.js" type="text/javascript"></script>

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

en mi caso ese fue el problema espero que ayude

En mi caso, agregar jQuery para mostrar el modal no funcionó:

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

Lo cual parecía ser porque el modal tenía el atributo aria-hidden = "true":

<div class="modal fade" aria-hidden="true" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

Se necesitaba eliminar ese atributo, así como el jQuery anterior:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

Tenga en cuenta que intenté cambiar las clases modales de modal fadea modal fade in, y eso no funcionó. Además, cambiar las clases de modal fadea modal showevitó que el modal pudiera cerrarse.

Heres una solución [sin inicialización de JavaScript!]

No pude encontrar un ejemplo sin inicializar su modal con javascript, $('#myModal').modal('show')por lo que he aquí una sugerencia sobre cómo podría implementarlo sin retraso de javascript en la carga de la página.

1. Edite su contenedor modal div con clase y estilo:

<div class="modal in" id="MyModal" tabindex="-1" role="dialog" style="display: block; padding-right: 17px;">

2. Edita tu cuerpo con clase y estilo:

   <body class="modal-open" style="padding-right:17px;">

3. Agregar modal-backdrop div

   <div class="modal-backdrop in"></div>

4. Agregar guión

   $(document).ready(function() {
       $('body').css('padding-right', '0px');
       $('body').removeClass('modal-open');
       $('.modal-backdrop').remove();
   
       $('#MyModal').modal('show'); });

   Lo que sucederá es que el html para su modal se cargará en la carga de la página sin javascript (sin demora). En este punto, no puede cerrar el modal, por eso tenemos el script document.ready, para cargar el modal correctamente cuando todo está cargado. En realidad, eliminaremos el código personalizado y luego inicializaremos el modal, (nuevamente), con el .modal ('show').

Puede activar el modal sin escribir ningún JavaScript simplemente a través de atributos de datos.

La opción "mostrar" establecida en verdadero muestra el modal cuando se inicializa:

<div class="modal fade" tabindex="-1" role="dialog" data-show="true"></div>

Como otros han mencionado, cree su modal con display: block

<div class="modal in" tabindex="-1" role="dialog" style="display:block">
...

Coloque el telón de fondo en cualquier lugar de su página, no necesariamente debe estar al final de la página

<div class="modal-backdrop fade show"></div> 

Luego, para poder cerrar el diálogo nuevamente, agregue esto

<script>
    $("button[data-dismiss=modal]").click(function () {
        $(".modal.in").removeClass("in").addClass("fade").hide();
        $(".modal-backdrop").remove();
    });
</script>

Espero que esto ayude

Probado con Bootstrap 3 y jQuery (2.2 y 2.3)

$(window).on('load',function(){
  $('#myModal').modal('show');
});



<!-- Modal -->
<div class="modal fade" 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">&times;</button>
          <h4 class="modal-title"><i class="fa fa-exclamation-circle"></i>&nbsp; //Your modal Title</h4>
        </div>
        <div class="modal-body">
          //Your modal Content
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
        </div>
      </div>

    </div>
</div>

https://jsfiddle.net/d7utnsbm/

<div id="ModalStart" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
          <p><i class="icon-spinner icon-spin icon-4x"></i></p>
    </div>
</div>

Puede mostrarlo al inicio incluso sin Javascript. Simplemente elimine la clase "hide".

class="Modal"

Además de las respuestas user2545728 y Reft, sin javascript pero con elmodal-backdrop in

3 cosas para agregar

1. un div con las clases modal-backdrop inanteriores a la clase .modal
2. style="display:block;" a la clase .modal
3. fade in junto con la clase .modal

Ejemplo

<div class="modal-backdrop in"></div>

<div class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="channelModal" style="display:block;">

    <div class="modal-dialog modal-lg" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <h4 class="modal-title" id="channelModal">Welcome!</h4>

            </div>

            <div class="modal-body" style="height:350px;">

                How did you find us?

            </div>

        </div>

    </div>

</div>

Actualización 2020 - Bootstrap 4

El marcado modal ha cambiado ligeramente para Bootstrap 4. Así es como puede abrir el modal en la carga de la página y, opcionalmente, retrasar la visualización del modal ...

$(window).on('load',function(){
    var delayMs = 1500; // delay in milliseconds

    setTimeout(function(){
        $('#myModal').modal('show');
    }, delayMs);
});    

<div class="modal fade" id="myModal">
      <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">My Modal</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary mx-auto" data-dismiss="modal">Close</button>
                </div>
            </div>
      </div>
</div>

Demo en Codeply

En bootstrap 3 solo necesita inicializar el modal a través de js y si en el momento de la carga de la página el marcado modal está en la página, aparecerá el modal.

En caso de que quiera evitar esto, use la opción show: falsedonde inicializa el modal. Algo como esto: $('.modal').modal({ show: false })

Es posible que desee mantener jquery.jsdiferido para una carga de página más rápida. Sin embargo, si jquery.jsse difiere , es $(window).loadposible que no funcione. Entonces puedes intentar

setTimeout(function(){$('#myModal').modal('show');},3000);

aparecerá su modal después de que la página esté completamente cargada (incluido jquery)

Para evitar que se anule el bootstrap y se pierda su funcionalidad, simplemente cree un botón de inicio normal, proporciónelo con un Id y haga clic en él usando jquery, así: El botón de inicio:

<button type="button" id="btnAnouncement" class="btn btn-primary" data-toggle="modal" data-target="#modalAnouncement">
  See what´s new!
</button>

El desencadenante jQuery:

$(document).ready(function () {
  $('#btnAnouncement').click();
)}

Espero eso ayude. ¡Salud!

Ejemplo simple Hacer un cargador de giro de un modal de arranque

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>
  $(document).ready(function(){
  $('#myModal').modal('show'); 
  setTimeout(function(){
  $('#myModal').modal('hide'); 
  }, 5000);
   });
  </script>
  <style>
.loader {
  border: 13px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 100px;
  height: 100px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.modal-dialog{
width: 150px;
    margin: 10% auto;
}
.modal-content{
background-color: transparent; 
   border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
}
</style>
</head>
<body>

<div class="container">

  <!-- Modal -->
  <div class="modal fade" data-backdrop="static" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">

        <div class="modal-body">
         <div class="loader"></div>
        </div>

      </div>

    </div>
  </div>

</div>

</body>
</html>