Как создать оверлей iframe в стиле Netflix без огромной библиотеки JavaScript?

Question

Я пытаюсь использовать ссылку, чтобы открыть оверлей, а не в отдельном всплывающем окне. Это наложение должно состоять из полупрозрачного слоя div, который блокирует весь экран от нажатия на него. Я также стремлюсь отключить прокрутку на этом этапе. Независимо от того, где вы находитесь на главной странице, при нажатии на ссылку наложение должно быть в центре координат X и Y экрана. Внутри этого оверлея div должен быть элемент iframe, сконфигурированный так, чтобы можно было загружать 3 размера контента.

Answer 1

http://onehackoranother.com/projects/jquery/boxy/

jQuery.boxy - еще один хороший и легкий модальный диалоговый плагин.

Answer 2

Shadowbox - хороший скрипт для встроенных «всплывающих окон». Он может работать с любой из обычных библиотек JS, если вы используете какую-либо (jQuery, Prototype и т. Д.) Или сам по себе, имеет довольно комплексную систему создания скинов, так что вы можете адаптировать стили, не прибегая к самому исходному коду.
Это также единственный такой скрипт (есть десятки), который я пробовал, который будет надежно работать во всех обычных браузерах.

Он не отключит прокрутку для вас (вы все равно можете видеть обычную прокрутку фона страницы через темное наложение), но «всплывающее окно» в любом случае останется фиксированным на экране.

Answer 3

Я обычно использую ThickBox для этого. Он работает очень хорошо и хорошо работает, если у пользователя не включен JS.

Он использует jQuery, но вы можете загрузить его из Google: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js и, возможно, получить выгоду от кэширования.

Answer 4

Возможно, вы захотите проверить старую библиотеку JS, которую я написал, под названием SubModal .

Легко понять и изменить. Иди в город;)

После того, как вы изменили его, используйте Minify в сочетании с gzip на вашем сервере. Размер библиотеки будет маленьким.

Answer 5

ThickBox (больше не разрабатывался) привел меня к этой библиотеке, которая, кажется, работает очень хорошо:

http://fancybox.net

Answer 6

Возьмите библиотеку javascript ext . Он имеет функциональность для наложений, которые являются модальными.