Question

我正在使用jquery datepicker。在页面中我有一个页脚，当弹出日期选择器时，它会隐藏在页脚内部。我该如何解决这个错误？这是我的JSFiddle

Here I have tried with footer and datepicker. But the date is hidden.

Answer 1

这种情况正在发生，因为您的页脚z-index高于日期弹出窗口

这就是为什么页脚位于日期弹出窗口之上。

设置页脚z-index to 0 or less that the date popup，它会起作用。

更新小提琴 https://jsfiddle.net/8devrvv8/8/

Answer 2

试试这个：

将页脚的<?xml version="1.0" encoding="UTF8"?> <SOAP-ENV:Envelope> <SOAP-ENV:Header> <wsse:Security <wsse:BinarySecurityToken /> <ds:Signature> <ds:SignedInfo> <ds:SignatureValue> <ds:KeyInfo> </ds:Signature> </wsse:Security> </SOAP-ENV:Header> <SOAP-ENV:Body> </SOAP-ENV:Body> </SOAP-ENV:Envelope>和z-index:0 background-color（日历）设置为白色。

<强> HTML：

tbody

<强> CSS：

<div data-role='footer' data-position="fixed" data-tap-toggle="false" data-hide-during-focus="" 
style='padding:40px;background-color:red;z-index:0'> 
</div>

以下是Updated Fiddle

Answer 3

从文档（here）：调用div上的.datepicker（）而不是默认显示的输入。

更新了小提琴： https://jsfiddle.net/8devrvv8/13/

我删除了表单和输入，并将其替换为div：

<div id="beautiful-calendar"></div>

在Javascript中对上述div调用.datepicker（）：

$('#beautiful-calendar').datepicker()

jquery datepicker隐藏在页脚内部

3 个答案: