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

StackOverflow https://stackoverflow.com/questions/99640

  •  01-07-2019
  •  | 
  •  

Вопрос

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

Это было полезно?

Решение

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

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

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

Другие советы

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

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

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

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

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

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

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

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

http://fancybox.net

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top