jQuery изменяемый размер дескриптора z-index - PullRequest
6 голосов
/ 12 января 2011

Я заметил, что изменяемые дескрипторы пользовательского интерфейса jQuery находятся поверх всех других элементов на странице. Я проверил с помощью инструментов разработчика Chrome и увидел, что им автоматически присваивается z-индекс 1001. Есть ли способ отключить это и просто дать им тот же z-индекс, что и у элемента с изменяемым размером? Спасибо.

Ответы [ 5 ]

13 голосов
/ 16 августа 2012

Лучше всего работает для меня, потому что без !important правило перезаписывается.

.ui-resizable-handle { z-index: auto !important; }
5 голосов
/ 12 января 2011

z-index устанавливается с помощью CSS, а не JavaScript.Вам нужно будет отредактировать ответственный CSS, в этом случае:

.ui-resizable-handle { 
    position: absolute;
    font-size: 0.1px; 
    z-index: 99999; 
    display: block;
}

Или определите свое собственное правило для переопределения поведения.Для получения дополнительной информации см. Эту страницу: http://www.mail-archive.com/jquery-ui@googlegroups.com/msg09524.html

2 голосов
/ 17 декабря 2014

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

// delete the zIndex property from resizable's options
// only have to do this once, before instantiating any resizables

delete $.ui.resizable.prototype.options.zIndex;
2 голосов
/ 01 февраля 2014

Для нас это был самый удобный и наименее хакерский способ переопределить настройки по умолчанию для объектов jQuery-ui.Вы можете заменить компонент с изменяемым размером любым другим компонентом.Просто убедитесь, что это выполняется после загрузки jQuery, но перед вызовом $ (element) .resziable ().

$. Extension ($. Ui.resizable.prototype.options, {zIndex: 2147483647});

1 голос
/ 01 сентября 2018

На самом деле, jQuery UI 1.12.1 Resizable resizer z-index по умолчанию 90 .

Это не задокументировано , но мы можем его инициализировать:

$(element).resizable({
  zIndex: 0,
});

// Red one, resizer appears through foreground divs
$("#w1").resizable(); // z-index resizer 90

// Gold one, no resizer appears through silver div
$("#w2").resizable({
  zIndex: 0, // z-index resizer 0
});
#w1, #w2, #w3 {
  position: absolute;
  width: 150px;
  height: 100px;
}

#w1 {
  left: 10px;
  top: 10px;
  background-color: red;
}

#w2 {
  left: 40px;
  top: 40px;
  background-color: gold;
}

#w3 {
  left: 70px;
  top: 70px;
  background-color: silver;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div id="w1"></div>
<div id="w2"></div>
<div id="w3"></div>
...