jQuery UI 1.10:dialog和zIndex选项

Question

当图像点击时,我必须对apear进行对话.问题是我在那里有一些非常大的z-index(例如500),而ui对话框就在那些元素的背面.

这是页面,您需要登录,用户:"raducup"并传递:"1".另一个问题是,当我单击关闭对话框时,对象会消失.

这是我点击图像时调用的函数:

function openItem(obiect){
    $( obiect ).css('zIndex',9999);
    $( obiect ).dialog({
        dialogClass: "no-close",
        modal: true,
        draggable: true,
        overlay: "background-color: red; opacity: 0.5",
        buttons: [
            {
                text: "OK",
                click: function() {
                    $( this ).dialog( "close" );
                }
            }
        ]
    });
    reparaZindex();
}

Answer 1

你没有告诉它,但你正在使用jQuery UI 1.10.

在jQuery UI 1.10中,该zIndex选项被删除:

删除了zIndex选项

与stack选项类似,zIndex选项对于正确的堆栈实现是不必要的.z-index在CSS中定义,现在通过确保聚焦对话框是其父级中的最后一个"堆叠"元素来控制堆叠.

你必须使用纯CSS来设置对话框"在顶部":

.ui-dialog { z-index: 1000 !important ;}

你需要键!important来覆盖元素的默认样式; 这会影响所有对话框,如果您只需要为对话框设置它,请使用该dialogClass选项并设置样式.

如果需要模态对话框设置modal: true选项,请参阅文档:

如果设置为true,则对话框将具有模态行为; 页面上的其他项目将被禁用,即无法与之交互.模态对话框在对话框下方创建叠加层,但在其他页面元素上方.

您需要使用更高的z-index设置模态覆盖,以便使用:

.ui-front { z-index: 1000 !important; }

这个元素也是.

Answer 2

您可能想尝试jQuery对话框方法:

$( ".selector" ).dialog( "moveToTop" );

参考:http://api.jqueryui.com/dialog/#method-moveToTop

Answer 3

添加你的CSS:

 .ui-dialog { z-index: 1000 !important ;}

Answer 4

这里有多个建议，但据我所知，jQuery UI 人员目前已经破坏了对话控制。

我这么说是因为我在页面上包含了一个对话，它是半透明的，模态消隐 div 位于其他一些元素后面。那是不对的！

最后，根据其他一些帖子，我开发了这个全局解决方案，作为对话小部件的扩展。它对我有用，但我不确定如果我从对话中打开对话会做什么。

基本上，它会查找页面上其他所有内容的 zIndex，并将 .ui-widget-overlay 移至更高的位置，并将对话本身移至更高的位置。

$.widget("ui.dialog", $.ui.dialog,
{
    open: function ()
    {
        var $dialog = $(this.element[0]);

        var maxZ = 0;
        $('*').each(function ()
        {
            var thisZ = $(this).css('zIndex');
            thisZ = (thisZ === 'auto' ? (Number(maxZ) + 1) : thisZ);
            if (thisZ > maxZ) maxZ = thisZ;
        });

        $(".ui-widget-overlay").css("zIndex", (maxZ + 1));
        $dialog.parent().css("zIndex", (maxZ + 2));

        return this._super();
    }
});

感谢以下内容，因为这是我从中获取如何执行此操作的信息的地方： /sf/answers/1466000021/

http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/