Inicie o Bootstrap Modal no carregamento da página

Eu não sei javascript em tudo. A documentação de bootstrap diz para

Chame o modal via javascript: $ (‘# myModal’). Modal (opções)

Eu não tenho idéia de como chamar isso em um carregamento de página. Usando o código fornecido na página de boot, posso chamar com sucesso o Modal em um clique de elemento, mas quero que ele seja carregado imediatamente em um carregamento de página.

Apenas embrulhe o modal que você quer chamar no carregamento da página dentro de um evento de load jQuery na seção head do seu documento e ele deve aparecer, assim:

JS

  

HTML

  

Você ainda pode chamar o modal em sua página chamando-o com um link como este:

 Launch Modal 

Você não precisa de javascript para mostrar o modal

A maneira mais simples é replace “ocultar” por “in”

 class="modal fade hide" 

assim

 class="modal fade in" 

e você precisa adicionar onclick = "$('.modal').hide()" no botão fechar;

PS: Eu acho que a melhor maneira é adicionar script jQuery:

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

Basta adicionar o seguinte-

 class="modal show" 

Exemplo de trabalho

    

Você pode experimentar este código executável

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

sobre o que o Ilich de Andre diz que você tem que adicionar o script js depois da linha no que você chama de jquery:

   

no meu caso, esse foi o problema espero que ajude

No meu caso, adicionar jQuery para exibir o modal não funcionou:

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

O que parecia ser porque o modal tinha atributo aria-hidden = “true”:

  

A remoção desse atributo era necessária, assim como o jQuery acima:

  

Note que eu tentei mudar as classs modal fade modal fade in para modal fade in , e isso não funcionou. Além disso, a mudança das classs de modal fade para modal show impediu que o modal pudesse ser fechado.

Heres uma solução [sem boot do javascript!]

Eu não consegui encontrar um exemplo sem inicializar o seu modal com javascript, $('#myModal').modal('show') , então aqui está uma sugestão de como você pode implementá-lo sem o atraso do javascript no carregamento da página.

  1. Edite seu div contêiner modal com class e estilo:

  1. Edite seu corpo com class e estilo:

  2. Adicionar div de fundo modal

  3. Adicionar script

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

    O que vai acontecer é que o html para o seu modal será carregado no carregamento da página sem qualquer javascript, (sem atraso). Neste ponto você não pode fechar o modal, e é por isso que temos o script document.ready, para carregar o modal corretamente quando tudo estiver carregado. Na verdade, vamos remover o código personalizado e, em seguida, inicializar o modal, (novamente), com o .modal (‘show’).

Você pode ativar o modal sem escrever qualquer JavaScript simplesmente por meio de atributos de dados.

A opção “show” definida como true mostra o modal quando inicializado:

  
  

Você pode mostrá-lo no começo mesmo sem Javascript. Apenas apague a class “hide”.

 class="Modal" 

No bootstrap 3 você só precisa inicializar o modal através de js e se no momento do carregamento da página a marcação modal estiver na página, o modal irá aparecer.

Caso você queira evitar isso, use a opção show: false onde você inicializa o modal. Algo parecido com isto: $('.modal').modal({ show: false })

Além das respostas user2545728 e Reft, sem javascript, mas com o modal-backdrop in

3 coisas para adicionar

  1. um div com as classs modal-backdrop in antes da class .modal
  2. style="display:block;" para a class .modal
  3. fade in conjunto com a class .modal

Exemplo

   

Testado com Bootstrap 3 e jQuery (2.2 e 2.3)

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

https://jsfiddle.net/d7utnsbm/

Você pode querer manter o jquery.js adiado para um carregamento de página mais rápido. No entanto, se jquery.js for adiado, o $(window).load poderá não funcionar. Então você pode tentar

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

irá aparecer o seu modal após a página estar completamente carregada (incluindo jquery)

Como outros já mencionaram, crie seu modal com display: block

  

Coloque o pano de fundo em qualquer lugar da sua página, ele não precisa necessariamente estar na parte inferior da página

  

Então, para poder fechar a checkbox de diálogo novamente, adicione

  

Espero que isto ajude

Atualização 2018 – Bootstrap 4

A marcação modal mudou um pouco para o Bootstrap 4. Veja como você pode abrir o modal no carregamento da página e, opcionalmente, atrasar a exibição do modal …

 $(window).on('load',function(){ var delayMs = 1500; // delay in milliseconds setTimeout(function(){ $('#myModal').modal('show'); }, delayMs); });  

Demonstração no Codeply

Exemplo simples Faça um carregador giratório de um modal de bootstrap

 < !DOCTYPE html>   Bootstrap Example