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移动到页面底部，它完美无缺。

还有另一个堆栈溢出，它说明了在某些情况下这是最佳做法的原因（JavaScript on the bottom of the page?）。

对你最好！

页面Bootstrap 3中的模态加载

3 个答案: