Мне нужно сделать диалоговое окно появляться, когда изображение на кнопке. Проблема в том, что у меня есть некоторые действительно большие значения z-индекса есть (500 к примеру) и диалоговое окно пользовательского интерфейса на задней части элементов.
Вот страница, вам необходимо войти в систему, пользователей: "по raducup" и пройти: запах мяты&; 1&;. Другая проблема заключается в том, что, когда я нажмите кнопку Закрыть ОНТ диалоговое окно, объект desapears.
Это функцию я называю, когда изображение нажмите:
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();
}
Вы Don'т сказать это, но вы используете пользовательского интерфейса jQuery 1.10.
В пользовательского интерфейса jQuery 1.10 опцию свойства zIndex
удаляется:
удалена опция свойства zIndex
подобная опция стек, опция zIndex равно лишнее надлежащее выполнение укладки. Значение z-индекса определяется в CSS и штабелирование сейчас контролируют обеспечение целенаправленного диалога последнего и"укладки" с элементом своего родителя.
вы должны использовать чистый CSS, чтобы установить диалог "на верху" по:
.ui-dialog { z-index: 1000 !important ;}
вам нужен ключ !важно
чтобы переопределить стиль по умолчанию элемента; это влияет на все ваши диалоги, Если вам нужно установить ее только для диалогового окна, используйте опцию `dialogClass и стиль.
Если вам нужно модальное диалоговое окно установить модальные: True параметра` см. В документации:
если установлено значение true, то диалоговое окно будет модальным поведения; другие пункты странице будут отключены, т. е. не может быть взаимодействовали. Модал диалоги создать оверлей ниже диалоговое окно, но над другой странице элементы.
Вам нужно установить модальное наложение с более высоким Z-индекса для этого использовать:
.ui-front { z-index: 1000 !important; }
для этого элемента тоже.
Возможно, вы захотите попробовать диалоговое метод jQuery:
$( ".selector" ).dialog( "moveToTop" );
Есть несколько предложений, но насколько я вижу с jQuery пользовательского интерфейса ребята нарушили этот диалог под свой контроль и в настоящее время.
Я говорю это потому, что я включаю диалог на моей странице, а ее полупрозрачные и модальные вырубных див за некоторыми другими элементами. Что может'т быть правым!
В конце концов, основываясь на некоторые другие должности, я разработал это глобальное решение, как расширение виджета диалога. Это работает для меня, но я'м не уверен, что он будет делать если я открыл диалог внутри диалога.
В основном он ищет свойство zIndex все еще на странице и перемещается .пользовательского интерфейса-виджет-верхний слой должен быть один выше, а сам диалог будет одним больше.
$.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/
Сэндвич мое звеном между модальный экран и диалог, Мне надо поднять элемент выше модально-экран, а потом поднять выше диалог моя стихия.
У меня был небольшой успех, выполнив следующие действия после создания диалога на элемент $ДЛГ
.
$dlg.closest('.ui-dialog').css('zIndex',adjustment);
Поскольку каждое окно имеет разные стартовые Z-индекса
(они постепенно увеличиваются) я делаю регулировка
строку с повышением стоимости, как это:
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;
}
Добавить это перед вызовом диалогового окна
$( obiect ).css('zIndex',9999);
И удалить
zIndex: 700,
из диалога
moveToTop
это правильный путь.
Z-индекса не является правильным. Он изначально работает, но несколько диалогов будет продолжать плавать под одним вы изменили с помощью z-индекса. Ничего хорошего.
Собственность добавить свойства zIndex
в диалоговом объекта:
$(elm).dialog(
zIndex: 10000
);