Существует ли пакет jQuery для блокировки всего пользовательского интерфейса, кроме абсолютно позиционированного DIV?

Question

У меня есть проект, в котором я хочу открыть форму в определенном месте относительно других элементов страницы.Я также хотел бы заблокировать элементы страницы не в форме, пока форма открыта.Я играл с blockUI, но похоже, что я могу только разместить неблокированный DIV относительно окна браузера.Это отлично подходит для модальностей, но не подходит для моей ситуации.

Позвольте мне посмотреть, могу ли я уточнить на примере.Допустим, у меня есть некоторый код вроде:

<div style="position:relative; height:400px; width:600px;">
  <p>This content should be blocked, as well as anything not in the next div</p>
  <div id="non-blocked-content" style="position:absolute; top:40px; left: 200px; width:300px; height:200px;">
    <form>
       <label>This should not be blocked</label>
       <input type="text" name="name">          
    </form>
  </div>
</div>

Я бы хотел, чтобы форма появлялась и была полезной, но остальная часть содержимого страницы должна быть заблокирована.Кто-нибудь знает о пакете javascript (предпочтительно jQuery) для этого?

Спасибо!- Брет

Answer 1

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

простой пример jsfiddle

Answer 2

Мне понравились предложенные решения, но ни одно из них не было абсолютно правильным. Код Пола устанавливает ширину и высоту элемента равными ширине и высоте окна. Если у вас есть большая страница, и вы прокручиваетесь вниз, заблокированная часть экрана не будет охватывать область, которую вы просматриваете.

Код, который я использовал, выглядит так:

$('<div/>').css({
    'width':$('body').width(),
    'height' :$('body').height()
}).appendTo('body').attr('id', 'overlay');

.. и наложение оформлено как ...

#overlay {
  position:absolute;
  top:0;
  left:0;
  z-index:998;
  background:url('/images/global/pixel-black-opacity-70-percent.png');
}

Answer 3

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

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

Я лично использовал blockUI с хорошим эффектом. Это работает как рекламируется. : -)

Answer 4

Почему бы не использовать blockUI и расположить предполагаемую форму относительно элементов, которые вы хотите?С помощью jQuery вы можете легко получить положение всех элементов в относительности к документу.