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 и добавить их, а не добавлять встроенные стили к элементу в script.Проще в обслуживании.

Answer 2

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

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

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

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