Question

当我在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>

Answer 1

替换行：

<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在依赖于它的其他脚本之前加载。

模态进度条打破了我的下拉菜单引导程序3.x.

1 个答案: