解決jquery-ui-autocomplete挑選清單被Bootstrap模態窗遮擋的問題

標籤：

轉自:http://www.cnblogs.com/wiseant/p/4553837.html

 

最近在一個ASP.NET MVC5項目中使用Bootstrap的模態窗(彈出層)來讓使用者填寫內容，其中的一個編輯框提供了自動完成功能，用jQuery UI Autocomplete來實現。因為我是WEB前端小白，遇到一個問題很久也沒解決掉，所以特簡單記錄一下，供以後查閱。問題：不使用模態窗的時候，autocomplete可以很好的工作，使用模態窗時彈出的選擇菜單會被模態窗遮擋。解決過程：     首先查到的解決辦法是在*autocomplete.css中找到.ui-autocomplete偽類，添加z-index: 100000000000000000000000000000000;     測試後沒有任何作用，也用Firebug嘗試去調試頁面，雖然查看到彈出層的z-index值為1041，而autocomplete產生的ul並沒有z-index值，以我的功力還是無從下手。     最後在部落格園找到一篇文章基於Jquery-ui的自動補全，按照貼子裡的做法，在cshtml檔案最後添加了下面一段CSS代碼，終於成功解決。<style type="text/css">    .ui-autocomplete{        display:block;        z-index:99999;    }</style>      然而，當我把這代碼單獨儲存到一個CSS(autocomplete-zindex.css)檔案，再引入到頁面中時，問題又回到之前的狀態了。複製代碼@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>}複製代碼     上面一段代碼的本意是將對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模態窗遮擋的問題