解決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值,以我的功力還是無從下手。
     最后在博客園找到一篇帖子基於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文件之后

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM