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

Solution 1

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

Is that what you're looking for ?

Solution 2

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

Comments

[Barbara Ester]

This function is for him to appear as Poup-up?

[Jérémy Dutheil]

This function is to open the modal window (if it is closed), when the document is loaded

[Barbara Ester]

this function is to open modal as a poup-up?

[Barbara Ester]

Thanks for the help, I'm doing something wrong? pair does not work?

[Barbara Ester]

oi junior Valew pela ajuda, inclui o codigo e nada acontece, esta como o codigo acima só troquei pelo que vc passou, eu inseri o javascript na head, sera que falta algo para funcionar?

[juniorb2s]

@barbaraEster bem, o código esta certo, se não funciono pode ser algum erro no javascript do bootstrap, ou você não incluiu corretamente. O modal funciona normalmente se você o chamar via button?

[juniorb2s]

Então pode ser algum erro na inclusão javascript. Tente ver o console do navegador, se ele imprime algum erro. Recomendo criar uma página em branco, incluir o bootstrap do zero, retirar qualquer javascript avulso e tentar abrir o modal. Javascript é meio chato para conflito, eu não mexo muito bem, mas as vezes da conflito se você tiver usando um outro js para outra função.

[Barbara Ester]

Blz Junior ja montei tudo de nv peguei desdo zero, vou fazer o teste aqui agora, só pra ter certeza antes de incluir o modal posso pegar o do via button mesmo? que seria essa parte?

[juniorb2s]

Desculpa, mas não entendi.

[Barbara Ester]

que seria o padrão para xamar o modal sem o button.

[Barbara Ester]

dai só tiro a chamada button e incluo <!--modal -->... e insero o javascript no head certo?

[juniorb2s]

@barbaraEster veja o exemplo que postei.

[Barbara Ester]

to usando o console de erro firefox no JS ele aponta pra erros:

[Barbara Ester]

esse tbm da mas é do html:[11:39:18.327] A codificação de caracteres do documento HTML não foi declarada. O documento será exibido com texto corrompido em algumas configurações de navegadores se o documento contiver caracteres fora da faixa US-ASCII. A codificação de caracteres da página deve ser declarada no documento ou protocolo de transferência. @ localhost/teste

[Barbara Ester]

esse do jquery:[11:39:18.333] O método getPreventDefault() não deve mais ser usado. No lugar, use defaultPrevented. @ code.jquery.com/jquery.js:5375

[Barbara Ester]

e esse tbm:[11:39:17.992] Os métodos getUserData() ou setUserData() não devem mais ser usados. No lugar, use WeakMap ou element.dataset. @ resource://gre/modules/XPIProvider.jsm -> file:///C:/Users/usuario/AppData/Roaming/Mozilla/Firefox/Pro‌​files/g41q0g0q.defau‌​lt/extensions/search‌​[email protected]/boot‌​strap.js -> file:///C:/Users/usuario/AppData/Roaming/Mozilla/Firefox/Pro‌​files/g41q0g0q.defau‌​lt/extensions/search‌​[email protected]/lib/‌​requestNotifier.js:4‌​7

[juniorb2s]

Como já disse, faça uma página em branco, inclua o bootstrap css, bootstrap js e jquery. E faça chamada, igual exemplo que te passei em cima, vai funcionar.