如何更改jQuery UI Datepicker Z-Index值？

我不得不使用旧版本的jQuery UI，它是1.8.10。此版本中的日期选择器在z-index设置中有一个错误，有时它会出现在其他控件下。我只是想调整dp的z-index，使其出现在其他控件的顶部。我试图将z-index更改为.js文件，但失败了。我读过，你必须在aftershow事件中设置这个值，因为如果它的更早（不知道这是否为真），该值将被覆盖。这是一个如何创建一个dp实例的例子...我还附加了一个timepicker到datepicker。如何更改jQuery UI Datepicker Z-Index值？

 $(function() { 
     $("input[id$='txtPreviousCutOff']").datetimepicker({ 
      timeFormat: "hh:mm tt", 
      stepMinute: 5 
     }); 
     $("#dpimage6").click(function() { 
      $("input[id$='txtPreviousCutOff']").datepicker("show") 
     }); 
    });

来源

2012-12-11 user1732364

.ui-datepicker-div { z-index: 999999; }

或与JS：

$(function() { 
    $("input[id$='txtPreviousCutOff']").datetimepicker({ 
     timeFormat: "hh:mm tt", 
     stepMinute: 5 
    }); 
    $("#dpimage6").click(function() { 
     $("input[id$='txtPreviousCutOff']").datepicker("show") 
    }); 
    $('.ui-datepicker-div').css('zIndex', 999999); 
});

来源

2012-12-11 16:32:11 Magicmarkker

我去了这是方法，它的工作到目前为止！所有3个都是很好的答案，但愿我可以检查它们全部:) – user1732364

我必须做＃ui-datepicker-div来通过ID指定元素（它们在我们的jQuery版本中的命名都是相同的）。 –

这有点不好意思，因为可能有'.modal'通过引导程序铺设，其中有'z-index：1050'。我会建议*不要*在同一时间/页面/整个项目中混合使用jquery-ui和bootstrap。但专门切换到一个以避免这种干扰。 – Roland

您需要将样式应用到ui-widget-content类

.ui-widget-content 
{ 
    z-index: 100; 
}

确保已加入更好的特异性类因此它覆盖了UI styles

#datepicker.ui-widget-content {}

来源

2012-12-11 16:34:59

使用此设置您的日期选择器的z-index：（未经测试，但应该工作）

$("input[id$='txtPreviousCutOff']").datetimepicker({ 
      timeFormat: "hh:mm tt", 
      stepMinute: 5, 
      beforeShow: function() {$('#ui-datepicker-div').css('z-index',++$.ui.dialog.maxZ); } 
     });

来源

2012-12-11 16:37:53

我认为这个解决方案应该可以工作，但这一切都取决于jQuery的版本（也许）。在1.9中，我使用atm的版本，这不会做，因为函数要呈现datepicker，在beforeShow之后调用“_showDatepicker”，并且在该函数内部设置datepicker的z-index，覆盖z-index我们在beforeShow中填充。没有检查其他版本。 – hjbolide

看起来像日期选择器的副本无论z-索引值的原始输入元件。我能想到的2种方法来解决这个问题：

非JS 只需添加z-index:1051;你输入元素的样式属性。这是基于引导.modal类的观测使用的使用JS 当声明你的日期选择器，添加检索的.modal的z指数beforeShow处理器1050

动态解决方案的z-index，并设置日期选择器的Z - 索引到1比1更高：

datepicker({beforeShow: function(inputElem, inst) { var zi = Number($(inputElem).closest('.modal').css('z-index')); $(inputElem).css('z-index',zi+1); }});

来源

2014-01-10 02:47:13 lastoneisbearfood

或者避免同时使用BS2/3 + jquery-ui并专门切换到其中的一个。 – Roland

此代码适用于我。假设我有日期选择器div名称“ui-datepicker-div”，并且类应用程序是“ui-datepicker”。所以我把CSS作为它的工作给我。

#ui-datepicker-div ,.ui-datepicker { z-index: 99999 !important; }

来源

2014-06-20 14:39:13 Ajay2707

只需更改CSS：

由于没有这样做的：

/* Original */ 
.ui-datepicker { width: 17em; padding: .2em .2em 0 } 
/* Modify */ 
.ui-datepicker { width: 17em; padding: .2em .2em 0; z-index:9999 !important; }

不要忘记添加!Important。

这会覆盖由javascript添加的任何内联样式。

希望这将工作:)

编码快乐

来源

2014-09-21 07:32:09

我调用此函数时，用户点击在用于控制日期选择器

function textboxWhenClicked(){ 
    $("#textboxid").datepicker(); 
    $("#ui-datepicker-div").css("z-index", 999999); 
}

伟大的工作

-M文本框

来源

2017-07-28 02:59:17 tuberider

如何更改jQuery UI Datepicker Z-Index值？

回答

相关问题