Bootstrap 3页面中的模态加载答案

【问题标题】：Modal onload in page Bootstrap 3Bootstrap 3页面中的模态加载
【发布时间】：2013-11-19 10:25:53
【问题描述】：

我想知道如何在索引页面被触发时使模态自动？

我想打开一个模态索引出现在屏幕上，我应该在 bootstrap 3 中更改什么来达到这个效果？

打开页面的加载窗口中的模式。

感谢大家的帮助。

我是这样放的

我做错了什么？

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

【问题讨论】：

尝试添加一些代码或问题的详细视图

标签： events twitter-bootstrap modal-dialog twitter-bootstrap-3 onload

【解决方案1】：

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

这就是你要找的吗？

【讨论】：

这个功能是为了让他以Poup-up的形式出现？
这个函数是在加载文档时打开模态窗口（如果它是关闭的）
这个功能是打开modal作为弹窗？
感谢您的帮助，我做错了什么？对不起作用？

【解决方案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 -->

【讨论】：

oi 初级 Valew pela ajuda，包括 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 pod 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 pod ser algum erro na inclusão javascript。 Tente ver o console do navegador, se ele imprime algum erro。推荐 criar uma página em branco, incluir o bootstrap do zero, retirar qualquer javascript avulso etentar 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, so pra ter certeza antes de incluir o modal posso pegar o do via button mesmo? que seria essa parte?
Desculpa, mas não entendi。

【解决方案3】：

您的代码实际上可以工作。你做错的事情是 javascript 部分的位置。

您只需将代码的 javascript 部分放在文档底部的结束正文标记之前。

我刚刚用很长的文档测试了您的代码，但它失败了。我所做的只是将您的 javascript 移到页面底部，它运行良好。

还有另一个堆栈溢出说明了为什么在某些情况下这是最佳实践 (JavaScript on the bottom of the page?)。

祝你好运！

【讨论】：