jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了引导模式中的jQueryUI自动完成在模态下显示大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我在Bootstrap模态窗口中有一个jQueryUI自动完成.当我正常地在页面中运行它工作正常,但是当我尝试将其添加到模态时,该列表出现在模态后面,而不是在前面.

我尝试过以下的变化,没有运气:

$("#mymodal").css("z-index","1500"); 
$("tags'.$fieldname.'").css("z-index","5000");

在模态:

data-BACkdrop="false"

来源:

<!-- RFQ Modal -->
<div class="modal" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodalLabel" aria-hidden="true">
  <div class="modal-dialog" style="z-index:2000;">
    <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" data-BACkdrop="false"  >

      <script>
      $(function ps2() {        

      var availableTagsps2 = [
      {label:"3rd It Tech (IS# 20)",value:20},{label:"SeaBreeze Computers (IS# 14)",value:14},value:14} 

      ];

      $("#tagsps2").autocomplete({
           source: availableTagsps2

      });

  $( "#tagsps2" ).autocomplete({
            source: availableTagsps2,SELEct: function ps2(event,ui) {
            var SELEctedObj = ui.item;
            $(this).val(SELEctedObj.label);
            $('input[name="ps2"]').val(SELEctedObj.value);

            return false;
        }

    });
/* $("#mymodal").css("z-index","6000"); 
$("#tagsps2").css("z-index","20000");*/
  });

  </script>

  <input type="text" id="tagsps2"  required  AutoComplete="off" placeholder="Search..." 
  class="inputMed inline form-control input-med"  />
  <input type="hidden" name="ps2" value=""  />

        <div class="row" >
              <div class="col-md-6">
              <form role="form">
                  <div class="form-group" >

                    <!-- <input type="text" class="form-control" placeholder="SELEct client" required> -->
                  </div>

                  <button type="submit" class="btn btn-priMary btn-lg">Submit</button>
                </form>
              </div>

              <div class="col-md-6">

                    <button class="btn btn-priMary btn-lg" data-toggle="modal" data-target="#mymodal">
                    <a href="dashboard.PHP?vrfq" class="light">View Sent RFQ's</a>
                    </button>
                </div>

        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

          </div>
        </div>
      </div>
    </div>
<!-- end modal -->

    <a href="#" data-toggle="modal" data-target="#mymodal"><div class="RightCounter">&    nbsp;</div><h2>RFQ</h2></a>

解决方法

使用Bootstrap 3.1.1我发现只要添加以下CSS才能使自动完成工作.
.ui-autocomplete {
    z-index: 5000;
}

ui-autocomplete类附加在内部用于构建自动完成的Ul.通过给它一个疯狂的高z指数,你有效地确保它将被列在页面上的一切,包括模态对话框.

大佬总结

以上是大佬教程为你收集整理的引导模式中的jQueryUI自动完成在模态下显示全部内容,希望文章能够帮你解决引导模式中的jQueryUI自动完成在模态下显示所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。