Question

我遇到了在jquery fancybox中包含自动完成jquery文本框的问题。自动完成文本框似乎工作正常，如果它不在fancybox中但是只要我在fancybox中使用它它根本不起作用...几乎像你不能在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>

fancybox 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>

Thanx任何帮助！

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

Answer 1

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

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

自动填充功能无法在fancybox中运行

1 个答案: