1

我对对话 UI 有一个小问题。我将 zIndex 值标记为高数字，但似乎它忽略了它。

以下是我的代码

        $( "#number-add" ).dialog({
            resizable: false,
            width: 500,
            modal: false,
            autoOpen: false,
            stack: false,
            zIndex: 9999,
            buttons: {
            "Add Contact": function(e) {

            var formData = $('#number-add-form').serialize();

            //submit record
            $.ajax({    
                type: 'POST',
                url: 'ajax/handler-add-new-account-number.php',     
                data: formData,
                dataType: 'json',
                cache: false,
                timeout: 7000,
                success: function(data) {           

                    $('#responceAddNumber').removeClass().addClass((data.error === true) ? 'errorBox' : 'passBox').html(data.msg).fadeIn('fast');   

                    if ($('#responceAddNumber').hasClass('passBox')) {
                        $('#responceAddNumber').fadeIn('fast');
                        $('#add-form').hide();              

                        window.location.reload();
                        setTimeout(function() {

                            $(this).dialog( "close" );                          
                        }, 1000);


                    }

                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {

                    $('#response-add').removeClass().addClass('errorBox')
                                .html('<p>There was an<strong> ' + errorThrown +
                                      '</strong> error due to a<strong> ' + textStatus +
                                      '</strong> condition.</p>').fadeIn('fast');           
                },              
                complete: function(XMLHttpRequest, status) {            
                    if (   $('#response-add').hasClass('passBox') ){
                        $('form')[0].reset();
                    }
                }
            }); 



            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }

        }
    });

我将堆栈值设置为 false 并将 zIndex 设置为 9999。我在这里做错了什么以使 zIndex 不起作用？我正在使用 jQuery UI 对话框 1.10.2。

谢谢你的帮助。

4

2 回答 2

5

我在 jQuery UI 1.9 中花了很长时间来解决这个问题。最终，我决定采用这种有点蛮力的方法来为我的模态对话框设置 z-index。

$('#dialog').dialog({
    modal: true,
    zIndex: 25,
    stack: false,
    open: function (event, ui) {
        $('#dialog').parent('.ui-dialog').css('zIndex', 26)
            .nextAll('.ui-widget-overlay').css('zIndex', 25);
    }
});

您可能需要在 open 事件中使用 DOM 遍历来正确选择您的叠加层，或者如果您不使用模式对话框，则忽略它，但这给了我很好的可靠结果。

于 2014-01-28T16:29:54.663 回答
1

看起来应用该resizeable:false选项使得它没有设置 z-index 工作所需的位置

设置resizeable:true，删除它，或将父级设置ui-dialog为position:absolute

//after .dialog() call
$( "#number-add" ).parent(".ui-dialog").css({position:"absolute"});

或设置一个 css 样式有 ui-dialog 有position:absolute

.ui-dialog {
   position:absolute;
}

虽然不确定这种整体风格将如何影响 jQuery UI Dialog 的功能

于 2013-09-24T17:57:38.867 回答