Rešite težavo, ker je privzeti indeks jQuery UI datepicker z-index nastavljen na 1.

Solve Problem That Jquery Ui Datepicker Z Index Defaults 1



Pred kratkim sem naletel na težavo, da je glava strani blokirala nadzor izbire datuma strani. Računalnik naše stranke je širokozaslonski, ozek in ozek, zaslon pa majhen, zaradi česar ni mogoče izbrati meseca, ko klikne gumb za izbiro datuma. Slika:



Analizirajte vzrok te težave:



Z-indeks zaglavnega dela naše strani je nastavljen na 11, z-indeks pozicionirnega dela (tok dokumentov> registracija potrdil) in glavni naslovni del (registracija potrdil) sta nastavljena na 10, z- indeks vsebinskega dela je nastavljen na 9 Vrednost z-indeksa v izbirnem polju pojavnega datuma vdelanega uporabniškega vmesnika JQuery UI je: $ (input) .zIndex () + 1, zato je z-index enak 10, kar povzroči polje za izbiro datuma, ki ga blokira glava strani.



Po analizi celotni sistem z-indeksa podjetja z uporabniškim vmesnikom ni primeren za prilagoditev, ker je zasnovan tudi za druge module, kot je zgornji desni kot, ki smo ga naredili v pojavnem meniju, uporabniku pomagamo, spremenimo geslo, izhod, če poskušate postaviti del glave. Z-indeks je nastavljen na 10, vendar je pojavno okno blokirano.

Tako smo se odločili spremeniti z-indeks polja za izbiro datuma.



[Metoda 1]: (Spremenite datoteko sloga JQuery UI.CSS) Vse kontrolnike za izbiro časa v celotnem sistemu je mogoče enakomerno prilagoditi, kar je tudi naša končna metoda izbire.

Poiščite datoteko jquery-ui.css, poiščite ui-datepicker, dodajte z-index: 21! Pomembno (če je vrednost lahko večja, jo veliko ljudi nastavi na 9999, ne preveč sugestivno, morda bo več kot izbira datuma nadzor Raven je višja) ne pozabite hkrati spremeniti datoteke jquery-ui.min.css in na koncu uporabite še datoteko min.css.

.ui-datepicker { width: 17em padding: .2em .2em 0 display: none z-index:21 !important /*Solve the problem that the date selection control is blocked*/ }

[2. metoda]: Nadzirajte slog v JS s pomočjo nadzorne strani datepicker, vendar je ta metoda primerna samo za eno stran, druge strani ne vplivajo. Če ima stran velik sistem, je to bolj zapleteno (metoda 3 je enaka)

<p>date:<input type='text' id='mydatepicker' style='position: relative'>p>
 $('#mydatepicker').datepicker({ monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], dayNamesMin: [' ', ' ', ' ', ' ', 'four', 'five', 'six'], dateFormat: 'yy-mm-dd', beforeShow: function () { setTimeout( function () { $('#ui-datepicker-div').css('z-index', 21) }, 100 ) } })

[3. metoda]

 $('#mytimepicker').datetimepicker({ beforeShow:function(input) { $(input).css({ 'position': 'relative', 'z-index': 999999 }) } })

Ponatisnjeno na: https://www.cnblogs.com/XWCloud/p/6668625.html