javascript - 模态进度条打破了我的下拉菜单 bootstrap 3.x

标签 javascript jquery html css twitter-bootstrap-3

当我在 Modal 中使用进度条时,我在 html 文档的底部添加了以下内容:

   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

这工作正常,但在添加此行后,我的引导下拉菜单停止工作。

如果我删除上面的脚本 src 行,我的下拉菜单会再次开始工作,但模式进度条不起作用。显示模态但未执行任何进度操作。

进度条在常规页面中有效。只有模态不起作用。

当我使用下拉菜单的检查器时。单击时它不执行任何操作。 JS 控制台没有错误。

HTML

<td class="text-center">
 <div class="btn-group"><a href="#" data-toggle="dropdown" class="dropdown-toggle"><i class="fa fa-cog"></i></a>
 <ul class="dropdown-menu pull-right text-left">
 <li><a href="#" data-toggle="notify" data-message="Collecting device information" data-options="{&quot;status&quot;:&quot;success&quot;, &quot;pos&quot;:&quot;top-right&quot;}">Check device status</a>
  </li>
  <li><a href="services.html">Deploy Services</a>
  </li>                                       
  </ul>
  </div>
  </td>  

模态

<!-- My modal -->
    <div class="modal fade" id="getInfoModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Connecting to system...</h4>
          </div>
          <div class="modal-body">                    
                    <div id="modalProgressBar" class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>                    
                    </div>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

Javascript

$('#getInfoModal').on('show.bs.modal', function(e) {

    // Introduce delay and close after progress bar finish
    setTimeout(func, 3000);
        function func() {
            $('#getInfoModal').modal('hide');
            $('#devicestatus').parent().show();         
            $('.modal-backdrop').remove();
    }

    setTimeout(function(){
       $('#modalProgressBar').progressbar(100);
    }, 1000);

});

我用这个例子: http://codepen.io/bseth99/pen/BmHcF

添加 bootstrap.min.js 后下拉菜单不起作用的结果相同。

包括所有脚本:

   <script src="vendor/jquery/jquery.min.js"></script>
   <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
   <!-- Plugins-->
   <script src="vendor/chosen/chosen.jquery.min.js"></script>
   <script src="vendor/slider/js/bootstrap-slider.js"></script>
   <script src="vendor/filestyle/bootstrap-filestyle.min.js"></script>
   <!-- Animo-->
   <script src="vendor/animo/animo.min.js"></script>
   <!-- Sparklines-->
   <script src="vendor/sparklines/jquery.sparkline.min.js"></script>
   <!-- Slimscroll-->
   <script src="vendor/slimscroll/jquery.slimscroll.min.js"></script>
   <!-- Store + JSON-->
   <script src="vendor/store/store+json2.min.js"></script>
   <!-- ScreenFull-->
   <script src="vendor/screenfull/screenfull.min.js"></script>
   <!-- App Main-->

   <script src="app/js/app.js"></script>

   <!-- END Page Custom Script-->

   <script src="http://code.jquery.com/jquery.js"></script>
   <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

   <!-- START Page Custom Script-->
   <script src="app/js/progressbar.js"></script>

最佳答案

替换行:

<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>

使用以下几行:

<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

确保 jquery 和 bootstrap 在依赖它的其他脚本之前加载。

关于javascript - 模态进度条打破了我的下拉菜单 bootstrap 3.x,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26581305/

相关文章:

javascript - 将行为添加到 react-router Link

Javascript 发布数组并在服务器端接收它

javascript - .each 和 .text 来存储变量?

javascript - 如何确保浏览器在更新后加载文件的最新版本?

html - 文本对齐 : right not working for th element

HTML 列表与 chrome 分崩离析

javascript - 我应该明确等待元素在 Protractor 测试中可见吗?

javascript - 将数据从一页上的表拉到另一页

javascript - 将 div 中的 Fetched 数据从 excel 转换为查询

jquery - 在 iPhone 上的 Web 应用程序中维护 PHP session