jquery - 自动完成在fancybox中不起作用

Question

我在 jquery fancybox 中包含一个自动完成 jquery 文本框时遇到问题。如果自动完成文本框不在幻想框中，它似乎可以正常工作，但是一旦我在幻想框中使用它，它就根本不起作用......就像你不能在 jquery 中使用 jquery 一样？

代码如下（jquery文件的链接已经做了）：

<script type="text/javascript" src="site/themes/ama/js/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="site/themes/ama/fancyBox/jquery.fancybox.js"></script>
<link rel="stylesheet" href="site/themes/ama/fancyBox/jquery.fancybox.css" type="text/css" media="screen" />


<script>
var availableTags = ["one","two","three"];
$(document).ready(function(){
$( "#tags" ).autocomplete({
   source: availableTags
  });
  $(".fancybox").fancybox();
});
</script>

花式框 div 如下

<div id="display" style="display:none;">
<form name="upload" action="" method="post" enctype="multipart/form-data">
<label for="tags">Tags: </label>

这是不作为自动完成文本框工作的文本框。

<input type="text" id="tags" name="gallery" style="height: 20px;">
</form>
</div>

<p style="clear:both;"><a href="#display" class="fancybox">Upload Images</a></p>

感谢您的帮助！

更新 我尝试过使用 noConflict 但已经意识到它仅适用于 jquery 框架和其他框架之间的冲突，而不是为 jquery 制作的插件。我对这个问题感到非常困惑......

Answer 1

在你的 CSS 中使用它，这将解决问题：

.ui-autocomplete {
    z-index: 99999;
}