基于jquery編寫的放大鏡插件
702
2024-03-09
最近在一個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 rel="stylesheet" />
<link rel="stylesheet" />
<script src="http://www.gimoo.net/t/1812/~/Scripts/jquery-ui-autocomplete.js" type="text/javascript"></script>
<link rel="stylesheet" />
<script src="http://www.gimoo.net/t/1812/~/Scripts/jquery-ui-datepicker.js" type="text/javascript"></script>
<script src="http://www.gimoo.net/t/1812/~/Scripts/datepicker-zh-HK.js" type="text/javascript"></script>
<script src="http://www.gimoo.net/t/1812/~/Scripts/datepicker-setting.js" type="text/javascript"></script>
}
上面一段代碼的本意是將對autocomplete和datepicker的引用分開，相對獨立便于維護。
經過反復嘗試后發現，原來是因為jquery-ui-datepicker.css放在后面導致，把順序調換一下就可以了
<link rel="stylesheet" /> <link rel="stylesheet" /> <link 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模態窗遮擋的完美解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對綠夏網網站的支持！
