JQuery - Как разместить DIV на оверлей?

Question

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

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

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

Пока не обращайте внимания на то, что у меня есть другая подпрограмма для уничтожения событий щелчка на # 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, когда я не хочу, чтобы оно было затемнено - только то, что стоит за ним. В чем прикол?

Answer 1

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

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

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

Answer 2

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

Если вы хотите больше, на странице плагина jquery-оверлеев есть нагрузки

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

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