4

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 -->
Barbara Ester
  • 51
  • 1
  • 1
  • 6

3 Answers3

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

Is that what you're looking for ?

Jérémy Dutheil
  • 6,099
  • 7
  • 37
  • 52
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 -->
juniorb2s
  • 242
  • 4
  • 11
  • 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? – Barbara Ester Nov 19 '13 at 12:51
  • @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 Nov 19 '13 at 12:52
  • 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. – juniorb2s Nov 19 '13 at 13:02
  • 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? – Barbara Ester Nov 19 '13 at 13:32
  • Desculpa, mas não entendi. – juniorb2s Nov 19 '13 at 13:35
  • que seria o padrão para xamar o modal sem o button. – Barbara Ester Nov 19 '13 at 13:36
  • dai só tiro a chamada button e incluo ... e insero o javascript no head certo? – Barbara Ester Nov 19 '13 at 13:38
  • @barbaraEster veja o exemplo que postei. – juniorb2s Nov 19 '13 at 13:42
  • to usando o console de erro firefox no JS ele aponta pra erros: – Barbara Ester Nov 19 '13 at 13:43
  • 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. @ http://localhost/teste/ – Barbara Ester Nov 19 '13 at 13:44
  • esse do jquery:[11:39:18.333] O método getPreventDefault() não deve mais ser usado. No lugar, use defaultPrevented. @ https://code.jquery.com/jquery.js:5375 – Barbara Ester Nov 19 '13 at 13:44
  • 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/Profiles/g41q0g0q.default/extensions/searchads@instair.net/bootstrap.js -> file:///C:/Users/usuario/AppData/Roaming/Mozilla/Firefox/Profiles/g41q0g0q.default/extensions/searchads@instair.net/lib/requestNotifier.js:47 – Barbara Ester Nov 19 '13 at 13:45
  • 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. – juniorb2s Nov 19 '13 at 13:45
0

Your code will actually work. The thing you are doing wrong is the placement of the javascript portion.

You simply need to put the javascript portion of your code at the bottom of your document just before the closing body tag.

I just tested your code, as is, with a long document and it fails. All I did was move your javascript to the bottom of the page and it works perfectly.

There is another stack overflow that talks about why this is a best practice in some cases (JavaScript on the bottom of the page?).

Best to you!

Community
  • 1
  • 1
jfgrissom
  • 592
  • 5
  • 13