Ratkaise ongelma, jonka mukaan jQuery-käyttöliittymän datepicker z-index on oletusarvoisesti 1.

Solve Problem That Jquery Ui Datepicker Z Index Defaults 1



Viime aikoina törmäsin ongelmaan, että sivun otsikko estää sivun päivämäärän valinnan ohjauksen. Asiakkaamme tietokone on laajakuva, kapea ja kapea, ja näyttö on pieni, mikä tekee mahdottomaksi valita kuukauden, jolloin hän napsauttaa päivämäärän valintanäppäintä. Kuva:



Analysoi ongelman syy:



Sivumme otsikko-osan z-indeksi on asetettu 11: ksi, paikannusosan z-indeksi (asiakirjan kulku> kuitin rekisteröinti) ja pääotsikon osa (kuitin rekisteröinti) on asetettu 10: ksi ja z- sisältöosan hakemistoksi on asetettu 9 JQuery UI: n sisäänrakennetun ponnahdusikkunan valintaruudun z-indeksiarvo on: $ (input) .zIndex () + 1, joten z-indeksi on yhtä suuri kuin 10, aiheuttaen päivämäärän valintaruutu on estettävä sivun otsikossa.



Analyysin jälkeen yrityksen koko käyttöliittymäkehyksen z-indeksijärjestelmä ei sovellu säätöön, koska se on suunniteltu myös muille moduuleille, kuten ponnahdusvalikkoruudun tekemälle oikeaan yläkulmaan, joka antaa käyttäjälle apua, muuttaa salasana, poistu, jos yrität laittaa otsikko-osan. Z-indeksi on asetettu arvoon 10, mutta sitten ponnahdusikkuna estetään.

Joten päätimme muuttaa päivämäärän valintaruudun z-hakemistoa.



[Tapa 1]: (Muokkaa JQuery UI.CSS -tyylitiedostoa) Kaikkia järjestelmän kaikkia aikavalinnan säätimiä voidaan säätää tasaisesti, mikä on myös lopullinen valintamenetelmämme.

Etsi jquery-ui.css-tiedosto, etsi ui-datepicker, lisää z-index: 21! Tärkeä (jos arvo voi olla suurempi, monet ihmiset asettavat sen arvoon 9999, ei liian vihjailevia, ehkä niitä on enemmän kuin päivämäärän valinta ohjaus Taso on korkeampi) .Älä unohda muokata jquery-ui.min.css-tiedostoa samanaikaisesti ja käyttää lopuksi tätä min.css-tiedostoa.

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

[Tapa 2]: Ohjaa tyyliä JS: ssä datepicker-ohjaussivulla, mutta tämä menetelmä soveltuu vain yhdelle sivulle, tämä ei vaikuta muihin sivuihin. Jos sivulla on suuri järjestelmä, tämä on monimutkaisempi (menetelmä 3 on sama)

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

[Menetelmä 3]

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

Painettu uudelleen: https://www.cnblogs.com/XWCloud/p/6668625.html