如何使用jQuery對話框修復zIndex問題UI

我在對話框UI中遇到了一個小問題。我將zIndex值標記爲高數字，但似乎它忽略了它。如何使用jQuery對話框修復zIndex問題UI

下面是我的代碼

 $("#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。

感謝您的幫助。

來源

2013-09-24 Jaylen

@布萊克的答案也適用於我 - 但錯字。 .css（'zIndex'，...）應該是.css（'z-index'，...） –

貌似應用resizeable:false選項使得它如此的位置不被設置，這是需要的z-index工作

要麼設置resizeable:true，刪除它，或設置父ui-dialog有position:absolute

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

或設置一個css樣式有UI的對話框有position:absolute

.ui-dialog { 
    position:absolute; 
}

雖然不知道這個整體風格如何影響jQuery UI的功能對話框

來源

2013-09-24 17:57:38

感謝您的幫助。我做了可調整大小：假但這並沒有解決問題。我還能嘗試什麼？ – Jaylen

我花了太長時間在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); 
    } 
});

您可能需要在打開的事件的DOM遍歷發揮正確選擇您的覆蓋，或者如果你沒有使用模式對話框忽略它，但這也給了我很好的可靠的結果。

來源

2014-01-28 16:29:54

如何使用jQuery對話框修復zIndex問題UI

回答

相關問題