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

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

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

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

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

Answer 2

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

Если вы хотите еще немного, есть нагрузки на jquery overlays plugin page

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

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