Bootstrap fixed the BUG that the date control was masked by the modal box. bootstrap Mode
Bootstrap BUG fixes about the date control being masked by the modal box
When using the bootstrap-datepicker.js plug-in, the date value cannot be filled because the date value is filled in the modal box and the value of the modal box overwrites the date control. As shown in:
The essential reason is: When we click the date control to fill in the date, the bootstrap-datepicker.js helped us dynamically generate the class defined in datepicker handler, its style is:
.dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; text-align: left; list-style: none; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0 6px 12px rgba(0, 0, 0, .175);}
Note: The bootstrap version used in this article is 3.2.2.
Because the z-index value of the modal box is greater than the z-index value of the dropdown-menu of the date control, it is hidden under the modal box, therefore, you only need to modify the z-index value of dropdown-menu to 10000. After the modification, it will be displayed normally, for example: