Solve the problem of jquery-ui-autocomplete selection list being obscured by bootstrap modal window

Recently, a bootstrap modal window (popup layer) was used in an ASP. NET MVC5 project to let the user fill in the content, and one of the edit boxes provided the AutoComplete feature, implemented with the jquery UI autocomplete.

Because I am the Web front-end small white, encountered a problem for a long time did not solve it, so special simple record for later review.

Problem: When the modal window is not used, the AutoComplete can work well and the selection menu that pops up when the modal window is used is obscured by the modal window.

Resolution process:

The first solution is to find it in *autocomplete.css. Ui-autocomplete pseudo-class, add z-index:100000000000000000000000000000000;
After testing does not have any effect, also uses Firebug to try to debug the page, although the view to the pop-up layer Z-index value is 1041, and AutoComplete generated UL does not have z-index value, to my skill or not to start.
Finally in the blog Park to find a post based on Jquery-ui automatic completion, according to the practice in the article, in the cshtml file finally added the following section of the CSS code, finally successfully resolved.

<styletype= "Text/css">. Ui-autocomplete{Display:Block;Z-index:99999;    }</style>

However, when I save this code separately to a CSS (AUTOCOMPLETE-ZINDEX.CSS) file and then into the page, the problem goes back to the previous state.

@section scripts{<Linkhref= "~/content/jquery-ui-autocomplete.css"rel= "stylesheet" />    <Linkhref= "~/content/autocomplete-zindex.css"rel= "stylesheet" />    <Scriptsrc= "~/scripts/jquery-ui-autocomplete.js"type= "Text/javascript"></Script>    <Linkhref= "~/content/jquery-ui-datepicker.css"rel= "stylesheet" />    <Scriptsrc= "~/scripts/jquery-ui-datepicker.js"type= "Text/javascript"></Script>    <Scriptsrc= "~/scripts/datepicker-zh-hk.js"type= "Text/javascript"></Script>    <Scriptsrc= "~/scripts/datepicker-setting.js"type= "Text/javascript"></Script>}

The code above is intended to separate references to AutoComplete and DatePicker, and is relatively independent and easy to maintain.

After repeated attempts to find that the original is because JQUERY-UI-DATEPICKER.CSS placed behind the cause, the order of exchange can be

    <Linkhref= "~/content/jquery-ui-autocomplete.css"rel= "stylesheet" />    <Linkhref= "~/content/jquery-ui-datepicker.css"rel= "stylesheet" />    <Linkhref= "~/content/autocomplete-zindex.css"rel= "stylesheet" />

Come here, also understand, actually directly change. Ui-autocomplete pseudo-Class code, plus z-index:99999, is actually correct, but it is to pay attention to the Datepicker.css file.

Scheme:

1. Simple: Directly modify the. Ui-autocomplete pseudo-Class in jquery-ui-autocomplete.css, note that the CSS file is placed at the end of all CSS files

2. Rough: Add code directly at the bottom of the cshtml page code: <style type= "Text/css" >.ui-autocomplete{z-index:99999;} </style>

3. Pseudo-Elegance: Write the second step of the code in a separate CSS file, and then keep a reference to the CSS file after all the CSS files

Solve the problem of jquery-ui-autocomplete selection list being obscured by bootstrap modal window