如何使用jQuery对话框UI修复zIndex问题 [英] How to fix the zIndex issue with jQuery Dialog UI
问题描述
我在对话框UI上有一个小问题.我将zIndex值标记为高数值,但似乎忽略了它.
I am having a small issue with the dialog UI. I marked the zIndex value to high number but it seems that it is ignoring it.
以下是我的代码
$( "#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 Dialog 1.10.2.
I set the stack value to false and the zIndex to 9999. What am I doing wrong here for the zIndex not to work? I am using jQuery UI Dialog 1.10.2.
感谢您的帮助.
推荐答案
在jQuery UI 1.9中,我花了很长时间来解决这个问题.最终,我选择了这种蛮力的方法来为我的模式对话框设置z-index.
I spent far too long grappling with this issue in jQuery UI 1.9. Eventually I settled on this somewhat brute force approach to setting the z-index for my modal dialogs.
$('#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遍历,以正确选择叠加层;如果不使用模式对话框,则可以忽略它,但这给了我很好的可靠结果.
You may need to play with the DOM traversal in the open event to properly select your overlay, or omit it if you are not using a modal dialog, but this has given me good reliable results.
这篇关于如何使用jQuery对话框UI修复zIndex问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!