我在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">×</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指数,你有效地确保它将被列在页面上的一切,包括模态对话框.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。