Отключить все элементы страницы с помощью модальной функции с помощью jquery

Я хочу отключить все элементы страницы при действии. Как функция модальная, которая находится в пользовательском интерфейсе JQuery.

Как и при действии ajax. Я хочу показать уведомление и в то же время включить функцию модальности. А после запроса нужно снова включить элементы страницы.

Есть ли какая-либо опция в ядре jquery для этого или любых плагинов?

Ответы

Ответ 1

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

// Declare this variable in the same scope as the ajax complete function
overlay = $('<div></div>').prependTo('body').attr('id', 'overlay');

И CSS:

#overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 1000000;
  background: url('link/to/semitransparent.png');
}

Затем, как только действие будет завершено, вы просто удалите его следующим образом:

overlay.remove();

Не нужно включать jQuery UI, если это единственное, что вам нужно.

Ответ 2

Один простой способ достичь этого - определить класс css следующим образом:

.dark-class
{
   background-color: #F0F0F0;
   filter:alpha(opacity=50); /* IE */
   opacity: 0.5; /* Safari, Opera */
   -moz-opacity:0.50; /* FireFox */
   z-index: 20;
   background-repeat:no-repeat;
   background-position:center;
   width: 100%;
   height: 100%;
   position:absolute;
   top: 0px;
   left: 0px;
}

Используйте jQuery для добавления этого класса в пустой div, который является первым потомком элемента body. Удалите класс для отключения модального режима.

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

Ответ 3

Мне нравится идея Цзяна, но вам не нужен образ со следующей таблицей стилей наложения.

#overlay {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.8;
    filter: alpha(opacity=80);
    z-index:50;
}

Ответ 4

Попробуйте добавить стиль "pointer-events: none"; к телу. Чтобы удалить его, используйте указатель-события: auto;

Подробнее здесь https://css-tricks.com/almanac/properties/p/pointer-events/ Хотя могут быть проблемы с более ранними браузерами, не поддерживающими его