Bootstrap模式弹出不显示

我想创建一个简单的模式弹出使用Bootstrap。我从http://getbootstrap.com/javascript/#modals得到了样品，我的代码看起来是这样的..Bootstrap模式弹出不显示

<html> 
    <head> 
     <script src="js/jquery.js"></script> 
     <script src="js/bootstrap.js"></script> 
     <script src="js/bootstrap-modal.js"></script> 
     <link rel="stylesheet" href="css/bootstrap.css" /> 
    </head> 
    <body> 
     <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
      Launch demo modal 
     </button> 

     <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> 
      </div> 
     </div> 
    </body> 
</html>

当我在我的浏览器上运行，然后按一下按钮，在弹出的只显示以毫秒为单位，然后关闭again..how阻止弹出从那样的关闭？

来源

2013-12-18 thekucays

看起来像是回答了，但作为一个附注，您应该在关闭'body'标记之前加载脚本。当他们在这样的头部时，他们会减慢页面渲染速度。 –

试试这个

<script src="js/bootstrap.js"></script> // This JS have all necessary files

下面JS从文件中删除

<script src="js/bootstrap-modal.js"></script>

DEMO

来源

2013-12-18 05:01:32

它的工作！非常感谢 – thekucays

接受作为答案和upvote如果帮助 –

尝试......我测试弹出住宿..

<html lang="en-US"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 

    <link rel="shortcut icon" href="http://teamtreehouse.com/assets/favicon.ico"> 
    <link rel="icon" href="http://teamtreehouse.com/assets/favicon.ico"> 
    <link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" media="all" href="css/bootstrap-responsive.min.css"> 
    <link rel="stylesheet" type="text/css" media="all" href="css/global.css"> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script type="text/javascript" language="javascript" charset="utf-8" src="js/bootstrap.min.js"></script> 
</head> 

<body> 
     <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
      Launch demo modal 
     </button> 

     <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> 
      </div> 
     </div> 
    </body> 
</html>

来源

2013-12-18 05:11:23 lynndragon

这对我来说完美的作品！ bootstrap上的例子不起作用！ – loretoparisi

这正在发生b由于js冲突，因为运行模式的代码已经存在于bootstrap.js中，并且您还使用bootstrap-modal.js

如果将bootstrap.js包含在您的代码中，那么您将来不必参考包含任何额外的js文件以运行引导程序的任何组件。（显然除了jQuery文件：D）

来源

2013-12-18 08:16:07 Nishant

Bootstrap模式弹出不显示

回答

相关问题