麻烦jQuery的对话和日期选择器插件

StackOverflow https://stackoverflow.com/questions/715677

  •  23-08-2019
  •  | 
  •  

题

我有一个对话框，我有对话框上一个datepicker字段。

当我打开对话框，并单击在日期选择字段，后面对话框日期选择器面板显示。

我尝试多种性质：Z-索引，栈，bgiframe，但不能成功

。

有人能帮帮我吗？

韩国社交协会

有帮助吗？

解决方案

<强>旧应答

z-index（注意连字符！）是关键属性。确保你把它比对话时，并确保您设置了正确的元素。下面是我们如何做到这一点：

#ui-datepicker-div 
{
 z-index: 1000; /* must be > than popup editor (950) */
}

<强> API变化 - 2010年4月17日，

在该日期选取器的CSS文件，找到.ui-datepicker项和更改：

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

使用的的z-index：9999重要; 在Firefox 3.5.9（Kubuntu的）工作

。

其他提示

有关的jquery-UI-1.8 

<style type="text/css">
    .ui-datepicker
    {
        z-index: 1003 !important; /* must be > than popup editor (1002) */
    }
</style>

重要的是需要，因为日期选择器具有内置的z索引为1的element.style

这为我工作：

.ui-datepicker {
        z-index: 9999 !important;
    }

将下面的风格在“输入”的文本元素：“位置：相对; z索引：100000;”。

在日期选择器DIV需要从输入的z索引，但这只有当的位置是相对的。

使用这种方式，您不必修改从jQuery UI的任何JavaScript。

作为UI版本1.7.2 UI-日期选择器-DIV不再是有效的CSS元件。 “UI的日期选择器”似乎是最外面的包装和z-index的设置为99999对我来说，只要我知道的正常工作

有关的jquery-UI-1.7.2 

<style type="text/css">
    .ui-datepicker
    {
        z-index: 1003; /* must be > than popup editor (1002) */
    }
</style>

在你的页面的顶部设置此。这将很好地工作：

<style type="text/css">
.ui-datepicker {z-index:10100;}
</style>

我把它通过调用工作

$("#ui-datepicker-div").css("z-index", "1003" );

我震惊的是：

A）在这里没有人提到的编程溶液于设置日期选择器Z索引 b）中没有选项了jQuery的DatePicker绑定到元素时传递的z索引。

我使用一个js法计算的最高索引。我们默认只检查申报单，因为这些都是有可能的元素得到的z-index值，是可以理解的比在页面上解析每一个元素更快。

/* Get the highest zindex for elements on the page
*/
function getHighestZIndex(element){
    var index_highest = 0;
    var index_current;
    if(element == undefined){
        element = 'div';
    }
    $(element).each(function(){
        index_current = parseInt($(this).css("z-index"), 10);
        if(index_current > index_highest) {
            index_highest = index_current;
        }
    });
    return index_highest;
}

由于我们使用JavaScript的日期选择器绑定到一个元素，即$（“＃some_element”）。日期选择器（），当时我们设定的目标元素的样式，以便日期选择器将搭载来自的z-index它。由于Ronye Vernaes（在他这个页面上的答案）用于指出日期选择器（）将拿起目标元素的z-index的，如果它有一个，并且设置为位置：相对的：

$(this.target).datepicker();
var zindex = e.getHighestZIndex();
zindex++;
$(this.target).css('position','relative');
$(this.target).css('z-index',zindex);

this.target是所成一个datepicker字段中的输入元件。 在结合的时候，我们得到的页面上最高的z-index，使元素的z-index的一个高。 当点击图标日期选择器，它会拿起从输入元件，其z轴折射率，因为，如Ronye Vernaes提到的，风格位置的：相对

在这个解决方案中，我们不要试图猜测什么最高的z-index值将是。实际上，我们得到它。

在对话被呈现在iframe，并且呈现在所有其他（包括下拉菜单）的顶部。同时，日期选择呈现在正常的HTML和绝对定位。

这听起来像日期选择器被绝对相对于母体页面，而不是iframe呈现。您是否尝试过将日历的对话框里面只是一个标准，非绝对定位的博客？或者你可以使用下拉菜单来代替。

解的jquery日期选择器1.8.3版本，改变z索引值，也不是没有可能通过CSS改变。

这一个正常工作：

jQuery('.ui-datepicker-trigger').click(function() {
        setTimeout(function() {
            jQuery('#ui-datepicker-div').css('z-index', 999);
        }, 500)
    });
  

在日期选择器现在设置弹出z索引到一个超过其相关联的字段，以保持其在该领域的前面，即使该场本身是在弹出对话框。默认情况下，z-index的是0，那么日期选择器以1结束了是否有一个地方，这是无法正确显示的日期选择器的情况下？ JQuery的论坛帖子

要得到的100。您需要z-index:99;和jQueryUI的输入将更新日期选择的z-index被z-index:100

<input style="z-index:99;">或<input class="high-z-index">和CSS .high-z-index { z-index: 99; }

您还可以指定z-index的继承应该从你的对话框继承并导致jQueryUI的正确检测的z-index。

<input style="z-index:inherit;">或<input class="inhert-z-index">和CSS .inherit-z-index { z-index: inherit; }

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top