layer和select2一起使用,导致select2下拉框无法显示的问题

时间:2024-04-02 19:54:03

今天使用layer插件做的弹出框中,使用了select2插件,但是select2插件的下拉框无法正常显示,很显然这是由于layer弹出层z-index值比较大,导致了select2的下拉框被遮住了。解决这个的方法一般就是增大select2下拉框的z-index值,或者减小layer的弹出框的值。虽然可以使用直接修改源码的方式去修改这个值,但是一般不建议这么做,因为这么做很可能会导致其他无法预料的问题。事实上,layer和select2也都提供了解决类似问题的方法。

方法一:修改layer的z-index值:

layer的参数设置中有z-index的设置,默认是作者的生日(19891014),可将这个值修改为较小的值。如99

 

layer和select2一起使用,导致select2下拉框无法显示的问题

这样设置完了之后,就能正常显示了:

layer和select2一起使用,导致select2下拉框无法显示的问题

第二种方法,是设置select2的dropdownParent参数:

layer和select2一起使用,导致select2下拉框无法显示的问题

将该参数设置为,layer容器:

layer和select2一起使用,导致select2下拉框无法显示的问题

这样设置完之后,select2的下拉框也能正常显示,总的来说还是推荐第二种方式,因为第二种方式,会根据据父容器的z-index值自动调整,这样即使有多个弹出层,也不会出现意外的情况。