Avvia Bootstrap Modal al caricamento della pagina

Non conosco affatto JavaScript. La documentazione di bootstrap dice a

Chiama il modale tramite javascript: $ ('# myModal'). Modale (opzioni)

Non ho idea di come chiamare questo al caricamento di una pagina. Utilizzando il codice fornito nella pagina bootstrap posso chiamare correttamente il modale con un clic sull'elemento, ma voglio che si carichi immediatamente al caricamento di una pagina.

Basta avvolgere il modale che si desidera chiamare al caricamento della pagina all'interno di un loadevento jQuery nella sezione head del documento e dovrebbe apparire in questo modo:

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>

Puoi comunque chiamare il modale all'interno della tua pagina chiamandolo con un link in questo modo:

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

Non è necessario javascriptmostrare modale

Il modo più semplice è sostituire "nascondi" con "in"

class="modal fade hide"

così

class="modal fade in"

e devi aggiungere onclick = "$('.modal').hide()"il pulsante Chiudi;

PS: Penso che il modo migliore sia aggiungere lo script jQuery:

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

Basta aggiungere il seguente-

class="modal show"

Esempio di lavoro

<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>

Puoi provare questo codice eseguibile-

$(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>

Altro può essere trovato qui .

Pensi di avere la tua risposta completa.

riguardo a ciò che dice Ilich di Andre, devi aggiungere lo script js dopo la riga in quello che chiami 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>

nel mio caso quello era il problema, spero che sia d'aiuto

Nel mio caso l'aggiunta di jQuery per visualizzare il modale non ha funzionato:

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

Il che sembrava essere perché il modale aveva l'attributo aria-hidden = "true":

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

Era necessario rimuovere quell'attributo e jQuery sopra:

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

Nota che ho provato a cambiare le classi modali da modal fadea modal fade in, e che non ha funzionato. Inoltre, cambiando le classi da modal fadeper modal showimpedire al modale di poter essere chiuso.

Ecco una soluzione [senza inizializzazione javascript!]

Non sono riuscito a trovare un esempio senza inizializzare il modale con javascript, $('#myModal').modal('show')quindi ecco un suggerimento su come è possibile implementarlo senza ritardo javascript sul caricamento della pagina.

1. Modifica il tuo div contenitore modale con classe e stile:

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

2. Modifica il tuo corpo con classe e stile:

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

3. Aggiungi div mod-fondale

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

4. Aggiungi script

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

   Quello che accadrà è che l'html per il tuo modale verrà caricato al caricamento della pagina senza javascript, (senza ritardo). A questo punto non è possibile chiudere il modale, quindi è per questo che abbiamo lo script document.ready, per caricare correttamente il modale quando tutto è caricato. In realtà rimuoveremo il codice personalizzato e quindi inizializzeremo il modale, (di nuovo), con il .modal ('show').

È possibile attivare il modale senza scrivere JavaScript semplicemente tramite gli attributi dei dati.

L'opzione "show" impostata su true mostra il modale quando inizializzato:

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

Come altri hanno già detto, crea il tuo modale con display: block

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

Posiziona lo sfondo in qualsiasi punto della pagina, non è necessario che sia nella parte inferiore della pagina

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

Quindi, per poter chiudere nuovamente la finestra di dialogo, aggiungere questo

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

Spero che questo ti aiuti

Testato con Bootstrap 3 e jQuery (2.2 e 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>

Puoi mostrarlo all'avvio anche senza Javascript. Elimina semplicemente la classe "nascondi".

class="Modal"

Oltre alle risposte user2545728 e Reft, senza javascript ma con ilmodal-backdrop in

3 cose da aggiungere

1. un div con le classi modal-backdrop inprima della classe .modal
2. style="display:block;" alla classe .modal
3. fade in insieme alla classe .modal

Esempio

<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>

Aggiornamento 2020 - Bootstrap 4

Il markup modale è leggermente cambiato per Bootstrap 4. Ecco come è possibile aprire il caricamento modale sulla pagina e, facoltativamente, ritardare la visualizzazione del modale ...

$(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 su Codeply

In bootstrap 3 devi solo inizializzare il modale attraverso js e se nel momento del caricamento della pagina il markup modale è nella pagina, il modale apparirà.

Nel caso in cui si desideri impedirlo, utilizzare l'opzione in show: falsecui si inizializza il modale. Qualcosa come questo: $('.modal').modal({ show: false })

Potresti voler rimanere jquery.jsdifferito per un caricamento più veloce della pagina. Tuttavia, se jquery.jsè differito, $(window).loadpotrebbe non funzionare. Quindi puoi provare

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

farà apparire la tua modale dopo che la pagina sarà completamente caricata (incluso jquery)

Per evitare che il bootstrap venga annullato e perda la sua funzionalità, è sufficiente creare un pulsante di avvio regolare, fornirgli un ID e 'fare clic su' usando jquery, in questo modo: Il pulsante di avvio:

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

Il trigger jQuery:

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

Spero che sia d'aiuto. Saluti!

Esempio semplice Crea uno spinner caricatore di un bootstrap modale

<!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>