Полноэкранное всплывающее окно с защитой javascript

Как сделать модальное окно с помощью javascript

Модальное диалоговое окно должно показываться поверх документа с которым будет запрещено что-либо делать до тех пор, пока диалог не будет завершён и закрыт. Начнём.

HTML разметка

 
 
Закрыть 
Много контента для скролла
 
 

Контейнер

Начнем с элемента контейнера. Это будет div , растянутый по ширине и высоте документа в браузере поверх всего приложения, чтобы запретить пользователю делать что-либо с контентом в приложении: выделять текст, кликать по кнопкам, ссылкам и т.д.

Добавим position: fixed , чтобы контейнер всегда был в поле зрения.

Для центрирования содержимого модального окна по горизонтали и вертикали будем использовать display: flex; justify-content: center; align-items: center; .

Контент

Теперь элемент для содержимого диалогового окна. Это собственно и есть модальное окно, которое будет располагаться в центре экрана.

Обратите внимание, что вместо width и height используются max-width и max-height . Это для того, чтобы модальное окно работало и на небольших экранах. Если вместо этого использовать width: 500px; , то на мобильных устройствах будет горизонтальная полоса прокрутки.

Кнопка “закрыть”

Последний шаг для завершения модального окна – это стилизация кнопки для его закрытия. Поместим кнопку в правый верхний угол.

Добавление модальной функциональности с помощью Javascript

Модальное окно уже начинает хорошо выглядеть. Следующий шаг – добавление некоторой функциональности, вот наши требования:

• Должна быть возможность открывать и закрывать окно.
• Когда модальное окно открыто, нужно отключить прокрутку в родительском приложении.

Выберем интерактивные элементы

Чтобы переключать режим модального окна, начнём с определения интерактивных элементов.

var modal = document.querySelector('.modal-container'); var closeButton = document.querySelector('.close'); var modalTriggers = document.querySelectorAll('[data-trigger]');

Модальное окно не должно отображаться при инициализации приложения. Позаботимся об этом, добавив следующие css-свойства модальному контейнеру.

А также, добавим новый класс, который будет показывать модальное окно.

Добавим перехватчики событий

Теперь, когда модальное окно по умолчанию скрыто, можно добавить функциональность кнопкам закрытия и открывания.

var openModal = function() < modal.classList.add('is-open') >var closeModal = function() < modal.classList.remove('is-open') >modalTriggers.forEach(function(item) < item.addEventListener('click', openModal) >) closeButton.addEventListener('click', closeModal)

Теперь можно переключать видимость модального окна.

Отключение скролла в родительском приложении

И последнее, но не менее важное: посмотрим, как отключить прокрутку в родительском приложении, когда модальное окно открыто.

Простейший способ отключить скролл – сохранить позицию прокрутки родительского приложения перед открыванием модального окна. Затем надо добавить в документ перехватчик событий скролла и устанавливать положение прокрутки в сохраненное положение каждый раз, когда пользователь пытается скроллить родительское приложение:

var isModalOpen = false; var pageYOffset = 0; var openModal = function() < . isModalOpen = true; pageYOffset = window.pageYOffset; >var closeModal = function() < . isModalOpen = false; >var onScroll = function(e) < if (isModalOpen) < window.scrollTo(0, pageYOffset); >> document.addEventListener('scroll', onScroll);

Источник

How to show fullscreen popup window in javascript?

Is there a way to make a popup window maximised as soon as it is opened? If not that, at least make it screen-sized? This:

window.open(src, 'newWin', 'fullscreen="yes"') 

Upvoted because, it’s a perfectly legitimate question. What «you» want doesn’t matter one bit if it’s a corporate web-app for an intranet.

@Tanoku I agree with Rob, just because it sounds like a bad practice for a «web page», doesn’t mean it is actually for a web site, have a think about the possibilities of internal applications utilising non-browsers, for exaample HTA, where a full screen window might be completely acceptable.

5 Answers 5

Use screen.availWidth and screen.availHeight to calculate a suitable size for the height and width parameters in window.open()

Although this is likely to be close, it will not be maximised, nor accurate for everyone, especially if all the toolbars are shown.

@DanishAdeel here: window.open(src, «newWin», «width=»+screen.availWidth+»,height=»+screen.availHeight)

var popup = window.open(URL); if (popup == null) alert('Please change your popup settings'); else

More than bad design — this «feature» is a recipe for UI disaster. There were a number of malicious web sites which exploited the full screen view features in JavaScript to hijack browser windows and display a screen indistinguishable from the user’s desktop. While there may still be a way to do this, please for the love of all things decent, do not implement this.

Don’t worry about my website actually having this implemented — as I mentioned I’ve only done it to satisfy lecturer’s requirements 🙂 Thanks for the warning though!

If you’re going to tell him what to do then do so -you’re right (it’s a bad idea)- but at least give a real answer also. I have asked some questions that have gotten answers like this and it is very annoying not to have an answer.

Источник

Как показать полноэкранное всплывающее окно в JavaScript?

Есть ли способ сделать максимизированное всплывающее окно, как только оно открывается? Если не это, хотя бы сделать его размером с экран? Этот:

window.open(src, 'newWin', 'fullscreen="yes"') 

По-видимому, работал только для старой версии IE.

5 ответов

Используйте screen.availWidth и screen.availHeight , чтобы вычислить подходящий размер для параметров высоты и ширины в window.open()

Хотя это, вероятно, будет близко, оно не будет максимизировано и не будет точным для всех, особенно если отображаются все панели инструментов.

Больше чем плохой дизайн — эта «особенность» — рецепт катастрофы пользовательского интерфейса. Там были номер из вредоносные веб-сайты, использующие функции полноэкранного просмотра в JavaScript для захвата окон браузера и отображения экрана, неотличимого от рабочего стола пользователя. Хотя еще может быть способ сделать это, пожалуйста, ради любви ко всем приличным вещам, не используйте это.

var popup = window.open(URL); if (popup == null) alert('Please change your popup settings'); else

Как насчет этого, я дал ширину и высоту значению большого числа, и это работает

window.open("https://www.w3schools.com", "_blank","toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=4000,height=4000"); 

Попробуйте это. Это работает для меня и для любой ссылки, которую вы хотите, или для чего-либо во всплывающем окне

Все, что вы выберете, будет отображаться во всплывающем окне в полноэкранном режиме во всплывающем окне.

Источник

Попап на чистом JS. Модальное окно без jQuery

Приветствую, друзья, сегодня я покажу, как создать попап на чистом js. В данном всплывающем окне вы можете разместить что угодно. Например, форму для обратной связи (как в данном примере) или любой другой контент. Так же мы реализуем несколько способов скрытие модального окна. Первый способ — скрытие попап окна при клике на фон, а второй — при клике на крестик. Пример того, что вы получите в итоге, можно посмотреть по ссылке на codepen .

HTML-структура модального окна

Для начала создадим HTML разметку для нашего всплывающего окна на чистом JavaScript. Тут все достаточно просто, так что я просто размещу код. Единственное, что стоит упомянуть — вы можете вместо формы разместить любой HTML код.

Так же вам нужно добавить кнопку, при клике на которую нужно открывать окно. В моем случае, это тег с классом ‘open-popup’ .

Стилизация всплывающего окна на чистом JS

Далее необходимо стилизовать наш попап на чистом js. CSS код так же достаточно простой. Большинство кода это вовсе стилизация формы, которая никак не влияет на само окно. Важный код для урока я вынесу в самое начало вставки с кодом. Так же я отмечу её с помощью комментариев.

/* Важная часть */ .popup__bg < position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); opacity: 0; // Скрываем фон и сам попап pointer-events: none; // Запрещаем ему быть целью событий transition: 0.5s all; >.popup__bg.active < // При добавлении класса 'active' opacity: 1; // Показываем фон и попап pointer-events: all; // Возвращаем события transition: 0.5s all; >.popup < position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); // Центрируем и масштабируем в 0 само окно background: #fff; width: 400px; padding: 25px; transition: 0.5s all; >.popup.active < // При добавлении класса 'active' transform: translate(-50%, -50%) scale(1); // Так же центрируем и плавно увеличиваем transition: 0.5s all; >/* Конец важной части */ /* Далее код для стилизации формы */ .close-popup < position: absolute; top: 10px; right: 10px; cursor: pointer; >.popup label < width: 100%; margin-bottom: 25px; display: flex; flex-direction: column-reverse; >.popup .label__text < font-size: 14px; text-transform: uppercase; font-weight: 500; color: #cfd0d3; margin-bottom: 5px; >.popup input < height: 45px; font-size: 18px; border: none; outline: none; border-bottom: 1px solid #cfd0d3; >.popup input:focus < border-bottom: 1px solid #2982ff; >.popup input:focus + .label__text < color: #2982ff; >.popup textarea < resize: none; width: 100%; height: 150px; border: none; outline: none; border-bottom: 1px solid #cfd0d3; font-size: 18px; padding-top: 5px; >.popup textarea:focus < border-bottom: 1px solid #2982ff; >.popup textarea:focus + .label__text < color: #2982ff; >.popup button < width: 100%; height: 45px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; border: 2px solid #2982ff; background: #2982ff; cursor: pointer; text-transform: uppercase; transition: 0.5s all; >.popup button:hover

Показ всплывающего окна при клике

Теперь переходим к самому интересному. Будем писать JavaScript код для модального окна. Для начала, создадим переменные, в которые мы поместим все DOM-елементы, которые нам понадобятся в будущем.

let popupBg = document.querySelector('.popup__bg'); // Фон попап окна let popup = document.querySelector('.popup'); // Само окно let openPopupButtons = document.querySelectorAll('.open-popup'); // Кнопки для показа окна let closePopupButton = document.querySelector('.close-popup'); // Кнопка для скрытия окна

Далее напишем код, для появления модального окна на чистом JavaScript. Для начала, нужно повесить обработчик события клика ( addEventListener ) на каждую кнопку открытия окна. При клике — указываем, что для фона и для самого окна нужно добавить класс ‘active’ . А так же предотвращаем стандартное поведение браузера, что бы при клике на ссылку браузер не прыгал вверх странички.

openPopupButtons.forEach((button) => < // Перебираем все кнопки button.addEventListener('click', (e) =>< // Для каждой вешаем обработчик событий на клик e.preventDefault(); // Предотвращаем дефолтное поведение браузера popupBg.classList.add('active'); // Добавляем класс 'active' для фона popup.classList.add('active'); // И для самого окна >) >);

Скрытие попап окна при клике на крестик

Тут код очень простой. Указываем, что при клике на крестик, нужно убрать активные классы с фона и самого окна.

closePopupButton.addEventListener('click',() => < // Вешаем обработчик на крестик popupBg.classList.remove('active'); // Убираем активный класс с фона popup.classList.remove('active'); // И с окна >);

Прячем попап окно на чистом js при клике на фон

Теперь разберемся как спрятать попап при клике на фон. Нужно повесить обработчик клика на весь документ. Далее необходимо передать событие (е). Если цель события (клик) — это фон окна, то мы так же убираем активные классы с фона и окна.

document.addEventListener('click', (e) => < // Вешаем обработчик на весь документ if(e.target === popupBg) < // Если цель клика - фот, то: popupBg.classList.remove('active'); // Убираем активный класс с фона popup.classList.remove('active'); // И с окна >>);

Спасибо, что прочитали. Если у вас остались вопросы — задавайте их в Telegram-канале или в комментариях на YouTube. Так же буду благодарен, если вы прочитаете другие мои статьи:

Full Stack разработчик, Frontend: Vue.js (2,3) + VueX + Vue Router, Backend: Node.js + Express.js. Раньше работал с РНР, WordPress, написал несколько проектов на Laravel. Люблю помогать людям изучать что-то новое)

Источник