Способы создания окон PopUp
В данном уроке я не открою тайну для матерых верстальщиков и гуру css, но данная статья будет полезна начинающим. именно здесь вы сможете узнать, как создавать всплывающие окна поверх всего сайта.
Чаще всего такие окна появляются после совершения определенных действий на сайте, например, пользователь нажимает на ссылку «Заказать обратный звонок» и перед ним всплывает форма заказа.
Очень удобно использовать PopUp окна в связке с ajax, но это уже тема другого урока.
Всё больше и больше в сети начинает появляться веб-ресурсов, которые используют всплывающие окна PopUp. В пример можно привести всем знакомые социальные сети. Все лишние данные со скриншотов удалены.
Вконтакте
Думаю достаточно доводов, чтобы начать изучать вопрос: как же сделать на своем сайте всплывающее окно PopUp.
Постановка задачи(ТЗ)
Необходимо создать поверх всего сайта всплывающее окно с затемнением экрана.
Решение
Способ 1
Результат:
Очень часто предлагают использовать:
Да, результат получается аналогичный, но из-за того, что у нас задана высота блока «затемнения», появляются полосы прокрутки. Именно поэтому такой метод не подходит.
Способ 2
Этот способ не отличается кардинально от Способа 1, но я считаю его более удобным.
Html (без изменений)
Результат аналогичный
Благодаря свойству: min-height:100%; наш блок «затемнение» обрел ширину в 100% и минимальную высоту в 100% экрана.
Единственным минусом данного способа является то, что Internet Explorer поддерживает данное свойство только с версии 8.0.
Добавление магии на Jquery
Теперь добавим ссылки для скрытия/отображение нашего всплывающего окна.
Для этого необходимо подключить библиотеку JQuery и небольшой скрипт:
Также необходимо обновить Html:
Результат
Теперь при загрузке страницы всплывающее окно PopUp скроется.
Если мы нажмем на ссылку «Show popup», у нас появится всплывающее окно. А если нажать на ссылку «Hide popup», то всплывающее окно вновь скроется.
How TO — CSS/JS Modal
Learn how to create a Modal Box with CSS and JavaScript.
How To Create a Modal Box
A modal is a dialog box/popup window that is displayed on top of the current page:
Modal Header
Modals are awesome!
Step 1) Add HTML:
Example
<!— Trigger/Open The Modal —>
<button >Open Modal</button>
The <span> element with class=»close» should be used to close the modal.
Step 2) Add CSS:
Example
/* The Modal (background) */
.modal <
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
>
/* Modal Content/Box */
.modal-content <
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
>
/* The Close Button */
.close <
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
>
.close:hover,
.close:focus <
color: black;
text-decoration: none;
cursor: pointer;
>
The .modal class represents the window BEHIND the actual modal box. The height and width is set to 100%, which should create the illusion of a background window.
Add a black background color with opacity.
Set position to fixed; meaning it will move up and down the page when the user scrolls.
It is hidden by default, and should be shown with a click of a button (we’ll cover this later).
The .modal-content class
This is the actual modal box that gets focus. Do whatever you want with it. We have got you started with a border, some padding, and a background color. The margin: 15% auto is used to push the modal box down from the top (15%) and centering it (auto).
We also set the width to 400px — this could be more or less, depending on screen size. We will cover this later.
The .close class
The close button is styled with a large font-size, a specific color and floats to the right. We have also added some styles that will change the color of the close button when the user moves the mouse over it.
Step 3) Add JavaScript:
Example
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById(«myBtn»);
// Get the <span> element that closes the modal
var span = document.getElementsByClassName(«close»)[0];
// When the user clicks on the button, open the modal
btn.onclick = function() <
modal.style.display = «block»;
>
// When the user clicks on <span> (x), close the modal
span.onclick = function() <
modal.style.display = «none»;
>
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) <
if (event.target == modal) <
modal.style.display = «none»;
>
>
Add Header and Footer
Add a class for modal-header, modal-body and modal-footer:
Example
Style the modal header, body and footer, and add animation (slide in the modal):
Example
/* Modal Header */
.modal-header <
padding: 2px 16px;
background-color: #5cb85c;
color: white;
>
/* Modal Body */
.modal-body
/* Modal Footer */
.modal-footer <
padding: 2px 16px;
background-color: #5cb85c;
color: white;
>
/* Modal Content */
.modal-content <
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
animation-name: animatetop;
animation-duration: 0.4s
>
Bottom Modal («Bottom sheets»)
An example on how to create a full-width modal that slides in from the bottom:
Как создать всплывающее окно (попап)?
Приветствую, друзья, сегодня будем создавать с вами попап (модальное окно) для сайта на jQuery/CSS. В данном всплывающем окне вы можете разместить что угодно. Например, форму для обратной связи (как в данном примере) или любой другой контент. Вы сможете сверстать в самом окне что угодно. Пример того, как будет выглядеть наш попап, вы можете увидеть на codepen.io кликнув на кнопку ниже:
Базовая HTML-структура попап-окна
Для начала, создадим базовую HTML-структуру для нашего модального окна. Она будет состоять из двух частей. Первая — div с классом «popup-bg», который будет использоваться для затемнения остального сайта при открытии попап-окна. Вторая часть — div с классом «popup». Это и будет телом нашего окна, в котором мы будем располагать весь контент. Так же я добавил картинку крестика с классом «close-popup». Данный класс нам понадобиться в будущем для закрывания окна. Картинку я поместил внутрь «popup». Вместо картинки вы можете сделать крестик с помощью CSS.
Базовый CSS-код
Ниже я приведу базовый CSS-код для затемнения сайта, отображения окна и позиционирования крестика. То есть для базовой структуры любого окна, вне зависимости от контента. Для того, что бы не писать стену текста с объяснением каждой строки, я просто покажу свой код, и оставлю в нем комментарии.
Наконец jQuery-код для открытия и закрытия окна
Дня начала создадим кнопку, при клике на которую мы будет показывать попап.
Далее сам jQuery код. Все максимально просто. Кликаем на класс «open-popup» — окно появляется, кликаем на «close-popup», окно пропадает. Так же в функцию при клике мы передаем e, что бы отследить клик. После чего функция preventDefault() отрубает стандартное поведение при клике на ссылку. Это нужно для того, что бы экран не прыгал вверх при открытии всплывающего окна. Если заменить в кнопке тег «a» на «span» или другой, то эту строчку можно убрать.
Наш попап готов. Осталось только поместить внутрь контент, и уже стилизовать его. Но можно ли улучшить этот код? Конечно!
Убираем скролл при открытом попап окне.
Если вы делали все со мной, и уже проверили, то вы могли заметить, что при открытии окна мы можем скролить по сайту. Выглядит это не очень. Для того, что бы убрать скролл, для начала добавим эти строчки в CSS код.
После чего немного модифицируем jQuery код. Будем добавлять/убирать этот класс к тегу html, при открытии или закрытии модального окна соответственно.
Готовый код для попап окна с формой обратной связи
Или вы можете скачать готовый архив, со всеми файлами и картинками, кликнув сюда.
Спасибо что прочитали! Если у вас остались вопросы, возникли проблемы или вы заметили ошибку — пишите в комментариях под этой статьей, постараюсь помочь всем)
Как создать модальное диалоговое окно с помощью CSS и JavaScript
Сегодня в программировании довольно распространены модальные окна. Модальные или всплывающие окна используются, чтобы показать последние изменения веб-страницы. Они привлекают внимание пользователя к определенному элементу.
Самое главное преимущество модального окна это то, что оно показывает добавленную информацию без дополнительной загрузки страницы. Оно дает пользователю соответствующую информацию в виде диалогового окна.
Другое преимущество относится к медленной загрузке, что может привлечь внимание пользователей.
Теперь, когда мы узнали, что такое модальное окно, перейдем к его созданию.
Есть различные способы создания модального окна с помощью HTML, CSS и JavaScript.
Давайте начнем создать код шаг за шагом!
1. Создайте HTML.
Создайте <div> с Любой контент внутри этой области будет скрыт браузером, а потом будет отображаться при активации. Любой другой контент может служить лишь фоном и никак не реагировать на перемещения мыши и нажатия клавиш.
Внутри #example разместите другой <div>, чтобы создать внешний вид диалогового окна. Оно будет содержать контент, который мы хотим показать пользователю.
2. Добавьте CSS.
Второй шаг — это добавление стиля к id с помощью CSS свойств.
Потом добавим стиль к внутреннему div и сделаем его горизонтальным.
Для максимальной совместимости браузера вместе со свойствами border-radius и transform используются такие расширения, как -Webkit- для Safari, Google Chrome и Opera (новые версии), -ms- для Internet Explorer, и -Moz- для Firefox.
Также установите к body свойства height, margin, padding и font-family.
3. Добавьте JavaScript.
Последним шагом является добавление JavaScript к нашему коду.
Мы можем добавить функцию внутри нашего документа или во внешнем .js файле.
Чтобы скрытый контент стал видимым, используется автоматический метод переключения.
Нам необходимо добавить следующее на нашу страницу, и таким образом, когда пользователь нажмет на ссылку, будет отображено окно.