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

Question

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

Вот эта страница, вам необходимо войти в систему, пользователь: "raducup" и pass: "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 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:

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

Вам нужно установить модальную накладку с более высоким Z-индексом для этого использовать:

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

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

Answer 2

Добавить в вашем CSS:

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

Answer 3

Добавить это до вызова диалогового

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

И удалить

zIndex: 700, 

из диалога

Answer 4

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

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

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

Answer 5

moveToTop является надлежащим образом.

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

Answer 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(); 
    } 
}); 

Благодаря следующему, так как это то, где я получил информацию от того, как это сделать: https://stackoverflow.com/a/20942857

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

Answer 7

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

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