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

try to add some code or detailed view of quesion

Anshul Parashar
– Anshul Parashar

2013-11-19 10:47:35 +00:00
Commented Nov 19, 2013 at 10:47 — Anshul Parashar
– Anshul Parashar, Commented Nov 19, 2013 at 10:47

Jérémy Dutheil · Accepted Answer · 2013-11-19 10:28:24Z

3

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

Is that what you're looking for ?

answered Nov 19, 2013 at 10:28

Jérémy Dutheil

6,1477 gold badges42 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Barbara Ester Over a year ago

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

Jérémy Dutheil Over a year ago

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

Barbara Ester Over a year ago

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

Barbara Ester Over a year ago

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

juniorb2s · Accepted Answer · 2013-11-19 13:41:57Z

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

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?
@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?
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.
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?

Community · Accepted Answer · 2017-05-23 12:23:47Z

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!

Collectives™ on Stack Overflow

Modal onload in page Bootstrap 3

3 Answers 3

4 Comments

13 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

13 Comments

Comments

Linked

Related