it-swarm.com.ru

jQuery UI 1.10: диалог и опция zIndex

Я должен сделать диалог, чтобы появиться, когда изображение щелкнет. Проблема в том, что у меня там действительно большой z-индекс (например, 500), а диалоговое окно пользовательского интерфейса находится на задней части этих элементов. 

Вот эта страница, вам нужно авторизоваться, пользователь: "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();
}
44
raducup

Вы этого не говорите, но вы используете jQuery UI 1.10.

В jQuery UI 1.10 опция zIndex удалена:

Удалена опция zIndex

Подобно опции стека, опция zIndex не нужна с правильная реализация укладки. Z-индекс определяется в CSS и Укладка теперь контролируется путем обеспечения того, чтобы сфокусированный диалог был последним элемент "stacking" в его родительском элементе.

вы должны использовать чистый CSS, чтобы установить диалог "сверху":

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

вам нужен ключ !important для переопределения стиля элемента по умолчанию; это влияет на все ваши диалоги, если вам нужно установить его только для диалога, используйте опцию dialogClass и стилизуйте его.

Если вам нужен модальный диалог, установите параметр modal: true, см. docs :

Если установлено значение true, диалог будет иметь модальное поведение; другие предметы на страница будет отключена, т.е. с ней нельзя будет взаимодействовать. Модальные диалоги создают наложение под диалогом, но над другой страницей элементы.

Вам нужно установить модальное наложение с более высоким z-индексом, чтобы использовать это:

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

для этого элемента тоже.

100
Irvin Dominin

Вы можете попробовать метод диалога jQuery: 

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

ссылка: http://api.jqueryui.com/dialog/#method-moveToTop

8
Alain Gauthier

Добавьте в свой CSS:

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

Здесь есть несколько предложений, но, насколько я вижу, ребята из jQuery UI в настоящее время нарушили управление диалогом. 

Я говорю это, потому что я включаю диалог на своей странице, и он полупрозрачен, а div модального гашения находится за некоторыми другими элементами. Это не может быть правдой!

В конце, основываясь на некоторых других постах, я разработал это глобальное решение как расширение виджета диалога. Это работает для меня, но я не уверен, что будет, если я открою диалог из диалога.

По сути, он ищет zIndex всего остального на странице и перемещает оверлей .ui-widget на один уровень выше, а сам диалог - на один уровень выше этого.

$.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://stackoverflow.com/a/20942857

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

1
Morvael

moveToTop - правильный путь.

z-индекс не является правильным. Первоначально он работает, но несколько диалогов будут продолжать плавать под тем, который вы изменили с помощью z-index. Не хорошо.

0
Carlos Saenz

Добавьте это перед вызовом диалога

$( obiect ).css('zIndex',9999);

И удалить

 zIndex: 700,

из диалога

0
Rohan Kumar

Чтобы поместить мой элемент между модальным экраном и диалоговым окном, мне нужно поднять свой элемент над модальным экраном, а затем поднять диалоговое окно над моим элементом.

Я добился небольшого успеха, выполнив следующие действия после создания диалогового окна для элемента $dlg.

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

Так как каждый диалог имеет различный начальный z-index (они постепенно увеличиваются), я делаю adjustment строку со значением повышения, например так:

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;
}
0
IAM_AL_X