JQuery - как разместить DIV на оверлее?
Я пытаюсь создать модальный диалог с наименьшим количеством кода 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, когда я не хочу, чтобы он был затемнен - только то, что за ним стоит. Что за хитрость?
Ответы 2
Я думаю, что лучшим решением будет использование плагина jquery. Быстрый поиск в Google выдал это: http://www.ericmmartin.com/simplemodal/, который делает то, что вам нужно, в трех строках!
Если хотите еще, на страница плагина оверлеев jquery есть нагрузки.
Судя по всему, CSS - это ключ к правильной работе, и большинство этих примеров должны сопровождаться демонстрационным CSS, чтобы вы могли их адаптировать.
Очевидно, это приносит больше внешнего кода jquery, который вас беспокоит, но я бы предположил, что хорошо написанный и стабильный плагин сэкономит вам много работы / времени / строк кода!
См. Этот быстрый демонстрация здесь, ключ к тому, чтобы модальное окно было абсолютным поверх непрозрачного фона. Демонстрация динамически добавляет div наложения фона и модальный div к телу, но вы можете определить их в html и просто показать их.
Согласны, что нет необходимости использовать плагин для модального эффекта, большинство плагинов имеют множество опций, отсюда раздутие, которое вам не нужно, если вам нужны только самые простые эффекты. - Обратите внимание, что мы можем сделать это двумя строками, а не тремя - и без плагина !!
Кроме того, гораздо проще определить классы css и добавить их, чем добавлять встроенные стили к элементу в скрипте. Легче в обслуживании.
Я улучшил вашу технику здесь: форумы.devnetwork.net/…
Смотрите здесь: stackoverflow.com/questions/6945289/…