Avvia Bootstrap Modal al caricamento della pagina

Non conosco affatto javascript. La documentazione di bootstrap dice di

Chiama il modale tramite javascript: $ (‘# myModal’). Modal (opzioni)

Non ho idea di come chiamare questo su un caricamento della pagina. Usando il codice fornito nella pagina di bootstrap posso chiamare con successo Modal su un elemento click, ma voglio caricarlo immediatamente sul caricamento di una pagina.

Basta avvolgere il modal che vuoi chiamare sul caricamento della pagina all’interno di un evento di load jQuery nella sezione head del tuo documento e dovrebbe apparire come popup:

JS

  

HTML

  

Puoi comunque chiamare il modal all’interno della tua pagina chiamandolo con un link come questo:

 Launch Modal 

Non hai bisogno di javascript per mostrare modale

Il modo più semplice è sostituire “nascondi” con “in”

 class="modal fade hide" 

così

 class="modal fade in" 

ed è necessario aggiungere onclick = "$('.modal').hide()" sulla chiusura del pulsante;

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

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

Basta aggiungere il seguente-

 class="modal show" 

Esempio di lavoro-

    

Puoi provare questo codice eseguibile-

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

per quanto riguarda ciò che Andre Ilich dice che devi aggiungere lo script js dopo la riga in quello che chiami jquery:

   

nel mio caso quello era il problema, spero che aiuti

Nel mio caso l’aggiunta di jQuery per visualizzare il modal non ha funzionato:

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

Il che sembrava essere dovuto al fatto che il modale aveva attributo aria-hidden = “true”:

  

La rimozione di quell’attributo era necessaria così come il jQuery sopra:

  

Nota che ho provato a cambiare le classi modali dalla modal fade modal fade in alla modal fade in e questo non ha funzionato. Inoltre, cambiando le classi dalla modal fade allo modal show fermato il modale dall’essere in grado di essere chiuso.

Ecco una soluzione [senza inizializzazione javascript!]

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

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

  1. Modifica il tuo corpo con class e stile:

  2. Aggiungi div modal-backdrop

  3. 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 modal verrà caricato al caricamento della pagina senza javascript, (nessun ritardo). A questo punto non è ansible chiudere il modale, ecco perché abbiamo lo script document.ready, per caricare correttamente il modal quando tutto è caricato. Veramente rimuoveremo il codice personalizzato e quindi inizializzeremo il modale, (di nuovo), con .modal (‘show’).

È ansible triggersre il modale senza scrivere alcun JavaScript semplicemente tramite gli attributi dei dati.

L’opzione “mostra” impostata su true mostra la modale quando inizializzata:

  
  

Puoi visualizzarlo all’avvio anche senza Javascript. Basta cancellare la class “nascondi”.

 class="Modal" 

In bootstrap 3 hai solo bisogno di inizializzare la modal tramite js e se nel momento della pagina si carica il markup modale nella pagina apparirà la modal.

Nel caso in cui si desideri evitare ciò, utilizzare l’opzione show: false dove si inizializza il modal. Qualcosa del genere: $('.modal').modal({ show: false })

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

3 cose da aggiungere

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

Esempio

   

Testato con Bootstrap 3 e jQuery (2.2 e 2.3)

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

https://jsfiddle.net/d7utnsbm/

Si consiglia di mantenere jquery.js posticipato per un caricamento più veloce della pagina. Tuttavia, se jquery.js è differito, $(window).load potrebbe non funzionare. Allora puoi provare

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

farà apparire il tuo modale dopo che la pagina è stata completamente caricata (incluso jquery)

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

  

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

  

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

  

Spero che questo ti aiuti

Aggiornamento 2018 – Bootstrap 4

Il markup modale è leggermente cambiato per Bootstrap 4. Ecco come è ansible 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); });  

Demo su Codeply

Esempio semplice Fai una finestra di caricamento di un modal bootstrap

    Bootstrap Example