Модальная загрузка на странице Bootstrap 3

Question

Я хотел бы знать, как сделать автоматическую автоматическую при срабатывании индексной страницы?

Я хотел бы открыть один модальный указатель на экране, что я должен изменить в bootstrap 3, чтобы получить этот эффект?

Модальное окно onload на открытой странице.

Спасибо за помощь, ребята.

я ставлю следующим образом

я делаю что-то не так?

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

Answer 1

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

Это то, что вы ищете?

Answer 2

попробовать:

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#teste').modal({ 
     show: true, 
    }) 
    }); 
</script> 

Пример:

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

Answer 3

Ваш код будет реально работать. То, что вы делаете неправильно, - это размещение части javascript.

Вам просто нужно поместить часть вашего кода в нижней части документа непосредственно перед закрывающим тегом тела.

Я просто проверил ваш код, как есть, с длинным документом, и он не прошел. Все, что я сделал, это переместить ваш javascript в нижнюю часть страницы, и он работает отлично.

Существует еще один переполнение стека, в котором говорится о том, почему в некоторых случаях это лучшая практика (JavaScript on the bottom of the page?).

Лучшее вам!