отключить все элементы страницы с модальной функцией, используя jquery - PullRequest
Новая
       13

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

11 голосов
/ 09 сентября 2010

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

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

Есть ли какая-либо опция в базовом jquery для этого или каких-либо плагинов?

Ответы [ 4 ]

24 голосов
/ 09 сентября 2010

Элементы страницы не отключены - делать это было бы довольно утомительно - скорее, полупрозрачный 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, если это единственное, для чего он вам нужен.

7 голосов
/ 09 сентября 2010

Один простой способ добиться этого - определить класс 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-индекс.

6 голосов
/ 15 октября 2012

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

#overlay {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.8;
    filter: alpha(opacity=80);
    z-index:50;
}
1 голос
/ 03 июня 2017

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

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

...