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

Мне нужно сделать диалог, чтобы увидеть, когда изображение onclick. Проблема в том, что у меня есть реальный большой z-индекс (например, 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();
}

Ответы

Ответ 1

Вы не говорите об этом, но используете 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; }

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

Ответ 2

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

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

Ответ 4

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

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

И удалите

 zIndex: 700,

из диалога

Ответ 5

moveToTop является правильным способом.

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

Ответ 6

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

Я говорю это, потому что я включаю диалог на моей странице, а его полупрозрачный и модальный галоп 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();
    }
});

Благодаря следующему, поскольку здесь я получил информацию о том, как это сделать: fooobar.com/questions/140026/...

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

Ответ 7

Добавить свойство zIndex в объект диалога:

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