JQuery - Как разместить DIV на Overlay?

Я пытаюсь сделать модальный диалог в наименьшем количестве jQuery-кода, потому что у моего проекта уже слишком много загруженного jQuery.

Итак, сначала мне понадобился оверлей, который достигается с помощью:

$('body').wrapInner('<div />')
.css('opacity','0.5')
.css('z-index','2')
.attr('id','dim1');

Не обращайте внимания на то, что у меня есть другая процедура, чтобы убить события click на # dim1, пока этот модальный присутствует. Итак, теперь мне нужно нарисовать мой модальный диалог сверху:

$('body').append('<div id="test">My Test</div>');
$('#test')
.css('opacity','1.0')
.css('position','fixed')
.css('color','#000')
.css('z-index','2000')
.css('height','300px')
.css('width','300px')
.css('top','50%')
.css('left','50%');

Тем не менее, когда я это делаю, я заканчиваю темным #test, когда я не хочу, чтобы это было затемнено - только материал, стоящий за ним. Что за трюк?

Ответ 1

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

Согласовано нет необходимости использовать плагин для модального эффекта, большинство плагинов поставляется с множеством вариантов, следовательно, раздувание, которое вам не нужно, если вам нужен только самый простой из эффектов. - Обратите внимание, что мы можем сделать это в двух строках, а не в 3 - и без плагина!

Также гораздо проще определить классы css и добавить их, а не добавлять встроенные стили в элемент в script. Легче поддерживать.

Ответ 2

Я думаю, что лучшим решением может быть использование jQuery-плагина. Быстрый поиск в Google бросил это: http://www.ericmmartin.com/simplemodal/, который делает то, что вам нужно в трех строках!

Если вы хотите еще немного, на странице jquery накладывается плагин

С точки зрения этого, CSS является ключом к правильному пониманию, и большинство из этих примеров должны поставляться с демо-CSS для адаптации.

Очевидно, что это приводит к появлению большего внешнего кода jquery, который вас беспокоит, но я бы предложил хорошо написанный и стабильный плагин, который сэкономит вам много работы/времени/строк кода!