javascript jQuery UI 1.10:dialog和zIndex選項




jquery dialog max height (7)

當圖像點擊時,我必須對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 #2

你沒有告訴它,但你正在使用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選項,請參閱docs

如果設置為true,則對話框將具有模態行為; 頁面上的其他項目將被禁用,即無法與之交互。 模態對話框在對話框下方創建疊加層,但在其他頁面元素上方。

您需要使用更高的z-index設置模態疊加層才能使用:

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

這個元素也是。


Answer #3

要將我的元素夾在模態屏幕和對話框之間,我需要將元素提升到模態屏幕上方,然後將對話框提升到元素上方。

在元素$dlg上創建對話框後,通過執行以下操作取得了一些成功。

$dlg.closest('.ui-dialog').css('zIndex',adjustment);

由於每個對話框都有一個不同的起始z-index (它們逐漸變大)我將adjustment一個帶有boost值的字符串,如下所示:

const adjustment = "+=99";

但是,jQuery只是不斷增加模態屏幕上的zIndex值,所以通過第二個對話框,三明治不再起作用。 我放棄了ui對話框“模態”,使其成為“假”,並創建了我自己的模態。 它完全模仿jQueryUI。 這裡是:

CoverAll = {};
CoverAll.modalDiv = null;

CoverAll.modalCloak = function(zIndex) {
  var div = CoverAll.modalDiv;
  if(!CoverAll.modalDiv) {
    div = CoverAll.modalDiv = document.createElement('div');
    div.style.background = '#aaaaaa';
    div.style.opacity    = '0.3';
    div.style.position   = 'fixed';
    div.style.top        = '0';
    div.style.left       = '0';
    div.style.width      = '100%';
    div.style.height     = '100%';
  }
  if(!div.parentElement) {
    document.body.appendChild(div);
  }
  if(zIndex == null)
    zIndex = 100;
  div.style.zIndex  = zIndex;
  return div;
}

CoverAll.modalUncloak = function() {
  var div = CoverAll.modalDiv;
  if(div && div.parentElement) {
    document.body.removeChild(div);
  }
  return div;
}

Answer #4

moveToTop是正確的方法。

z-Index不正確。 它最初工作,但多個對話框將繼續浮動在您使用z-index更改的對話框下面。 不好。


Answer #5

添加你的CSS:

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

Answer #6

zIndex屬性添加到對話框對象:

$(elm).dialog(
 zIndex: 10000
);

Answer #7

這裡有很多建議,但據我所知,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();
    }
});

感謝以下內容,因為這是我從中獲取有關如何執行此操作的信息: https://.com/a/20942857 : https://.com/a/20942857

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





jquery-ui