解決jquery-ui-autocomplete選擇列表被Bootstrap模態窗遮擋的問題
最近在一個ASP.NET MVC5專案中使用Bootstrap的模態窗(彈出層)來讓使用者填寫內容,其中的一個編輯框提供了自動完成功能,用jQuery UI Autocomplete來實現。
因為我是WEB前端小白,遇到一個問題很久也沒解決掉,所以特簡單記錄一下,供以後查閱。
問題:不使用模態窗的時候,autocomplete可以很好的工作,使用模態窗時彈出的選擇選單會被模態窗遮擋。
解決過程:
首先查到的解決辦法是在*autocomplete.css中找到.ui-autocomplete偽類,新增z-index: 100000000000000000000000000000000;
測試後沒有任何作用,也用Firebug嘗試去除錯頁面,雖然檢視到彈出層的z-index值為1041,而autocomplete生成的ul並沒有z-index值,以我的功力還是無從下手。
最後在部落格園找到一篇帖子
<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檔案之後