The JQuery UI AutoComplete selection list is a perfect solution for blocking bootstrap modal windows _jquery

Recently, a bootstrap modal window (pop-up layer) was used in a ASP.net MVC5 project to allow the user to fill in the content, and one of the edit boxes provided the AutoComplete feature, implemented using 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 a simple record for later inspection.

Problem: When the modal window is not used, the AutoComplete can work very well, and the choice menu that pops up when using modal window will be blocked by modal window.

Resolution process:

The first found solution is in *autocomplete.css. Ui-autocomplete pseudo class, add Z-index:

100000000000000000000000000000000;

After the test has no effect, but also with Firebug try to debug the page, although the view to the pop-up layer of the Z-index value of 1041, and AutoComplete generated UL and no z-index value, to my skill or not to start.

Finally found a post in the blog Park based on Jquery-ui automatic completion, according to the practice in the posts, in the cshtml file finally added the following CSS code, finally successfully resolved.

<style type= "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 where it was before.

@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>
}

The code above is meant 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 put in the back of the cause, the order of the exchange can be

<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 "/>

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

Scheme:

1. Simple: Directly modify the JQUERY-UI-AUTOCOMPLETE.CSS in the Ui-autocomplete pseudo class, note that the CSS file is placed at the end of all CSS files

2. Rudeness: Directly add code at the bottom of the cshtml page code: <style type= "Text/css" >.ui-autocomplete{z-index:99999; </style>

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

The above is a small series to introduce the jquery UI AutoComplete selection list by the Bootstrap modal window occlusion of the perfect solution, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!