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

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


javascript overlay css
person user18526    schedule 19.09.2008    source источник

Ответы (6)


arrow_upward
1
arrow_downward

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

Легко понять и изменить. Езжайте в город ;)

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

person Subimage    schedule 19.09.2008
comment
^^ не вижу, что вы пытаетесь показать. если у вас есть проблемы, обратитесь в группу поддержки Google. - person Subimage; 20.09.2008

arrow_upward
3
arrow_downward

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

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

person Lasar    schedule 19.09.2008

arrow_upward
3
arrow_downward

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

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

person Sebastian Grant    schedule 22.11.2011

arrow_upward
1
arrow_downward

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

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

person Raleigh Buckner    schedule 19.09.2008

arrow_upward
0
arrow_downward

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

person scubabbl    schedule 19.09.2008

arrow_upward
0
arrow_downward

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

http://fancybox.net

person tam7t    schedule 13.02.2010