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

Transferred from: http://www.cnblogs.com/wiseant/p/4553837.html

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. The solution: The first thing to find is theFound in *autocomplete.css. Ui-autocomplete pseudo-class, adding z-index:100000000000000000000000000000000; After the test does not have any effect, also uses the Firebug to attempt to debug the page, although views to the popup layer ZThe-index value is 1041, and the UL generated by AutoComplete does not have Z-index value, to my skill or not to be. Finally found a post in the blog Park based on jquery-UI Auto-completion, according to the practice in the post, the cshtml file at the end of the addition of 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 the previous state. Copy Code @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 copy 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 was because of jquery-ui-Datepicker.css in the back, you can change the order.<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 " /> Walk to this, also understand, actually directly change. Ui-autocomplete pseudo-Class code, plus z-index:99999In fact, it is correct, but it is to pay attention to the Datepicker.css file. Solution: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 files2. 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