jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法

<style type="text/css">
.ui-autocomplete{
display:block;
z-index:99999;
}
</style>

@section Scripts{
<link href="~/Content/jquery-ui-autocomplete.css" rel="stylesheet" />
<link href="~/Content/autocomplete-zindex.css" rel="stylesheet" />
<script src="/UploadFiles/2021-04-02/jquery-ui-autocomplete.js">

上面一段代码的本意是将对autocomplete和datepicker的引用分开，相对独立便于维护。
　　经过反复尝试后发现，原来是因为jquery-ui-datepicker.css放在后面导致，把顺序调换一下就可以了


<link href="~/Content/jquery-ui-autocomplete.css" rel="stylesheet" />
<link href="~/Content/jquery-ui-datepicker.css" rel="stylesheet" />
<link href="~/Content/autocomplete-zindex.css" rel="stylesheet" />


走到这，也就明白了，其实直接改.ui-autocomplete伪类代码，加上z-index:99999;其实也是正确的，不过就是要注意放在datepicker.css文件之后罢了。
方案：
　　1.简单：直接修改jquery-ui-autocomplete.css中的.ui-autocomplete伪类，注意将该css文件放在所有css文件的最后
　　2.粗暴：直接在cshtml页面代码最下面添加代码：<style type="text/css">.ui-autocomplete{z-index:99999;}</style>
　　3.伪雅：将第二步代码写在单独的css文件，然后保持对该css文件的引用放在所有css文件之后
以上所述是小编给大家介绍的jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！