最近在一個(gè)ASP.NET MVC5項(xiàng)目中使用Bootstrap的模態(tài)窗(彈出層)來讓用戶填寫內(nèi)容，其中的一個(gè)編輯框提供了自動(dòng)完成功能，用jQuery UI Autocomplete來實(shí)現(xiàn)。

因?yàn)槲沂荳EB前端小白，遇到一個(gè)問題很久也沒解決掉，所以特簡(jiǎn)單記錄一下，供以后查閱。

問題：不使用模態(tài)窗的時(shí)候，autocomplete可以很好的工作，使用模態(tài)窗時(shí)彈出的選擇菜單會(huì)被模態(tài)窗遮擋。

解決過程：

首先查到的解決辦法是在*autocomplete.css中找到.ui-autocomplete偽類，添加z-index:

100000000000000000000000000000000;

測(cè)試后沒有任何作用，也用Firebug嘗試去調(diào)試頁(yè)面，雖然查看到彈出層的z-index值為1041，而autocomplete生成的ul并沒有z-index值，以我的功力還是無從下手。

最后在博客園找到一篇帖子基于Jquery-ui的自動(dòng)補(bǔ)全，按照貼子里的做法，在cshtml文件最后添加了下面一段CSS代碼，終于成功解決。

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

然而，當(dāng)我把這代碼單獨(dú)保存到一個(gè)CSS(autocomplete-zindex.css)文件，再引入到頁(yè)面中時(shí)，問題又回到之前的狀態(tài)了。

@section Scripts{
<link href="~/Content/jquery-ui-autocomplete.css" rel="stylesheet" />
<link href="~/Content/autocomplete-zindex.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui-autocomplete.js" type="text/javascript"></script>
<link href="~/Content/jquery-ui-datepicker.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui-datepicker.js" type="text/javascript"></script>
<script src="~/Scripts/datepicker-zh-HK.js" type="text/javascript"></script>
<script src="~/Scripts/datepicker-setting.js" type="text/javascript"></script>
}

上面一段代碼的本意是將對(duì)autocomplete和datepicker的引用分開，相對(duì)獨(dú)立便于維護(hù)。

　　經(jīng)過反復(fù)嘗試后發(fā)現(xiàn)，原來是因?yàn)閖query-ui-datepicker.css放在后面導(dǎo)致，把順序調(diào)換一下就可以了

<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" />

走到這，也就明白了，其實(shí)直接改.ui-autocomplete偽類代碼，加上z-index:99999;其實(shí)也是正確的，不過就是要注意放在datepicker.css文件之后罷了。

方案：

　　1.簡(jiǎn)單：直接修改jquery-ui-autocomplete.css中的.ui-autocomplete偽類，注意將該css文件放在所有css文件的最后

　　2.粗暴：直接在cshtml頁(yè)面代碼最下面添加代碼：<style type="text/css">.ui-autocomplete{z-index:99999;}</style>

　　3.偽雅：將第二步代碼寫在單獨(dú)的css文件，然后保持對(duì)該css文件的引用放在所有css文件之后

以上所述是小編給大家介紹的jQuery ui autocomplete選擇列表被Bootstrap模態(tài)窗遮擋的完美解決方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論