Как сделать всплывающее окно мегагрупп

Добавил пользователь Алексей Ф.
Обновлено: 17.09.2024

Узнать, как создать всплывающие окна с помощью CSS и JavaScript.

Как создавать всплывающие окна

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Пример

/* Всплывающий контейнер */
.popup position: relative;
display: inline-block;
cursor: pointer;
>

/* Переключите этот класс при нажатии на всплывающий контейнер (скрыть и показать всплывающее окно) */
.popup .show visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
>

/* Добавить анимацию (исчезает во всплывающем окне) */
@-webkit-keyframes fadeIn from
to
>

Два разных примера создания модальных окон на чистом CSS.

Первый с использованием HTML-элемента , а второй с флажком

Вариант с использованием HTML-элемента

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

Закрытие окна происходит по клику вне его области, а крестик показывается как декорация.

Пример:

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium quis repellat nesciunt, ex temporibus perspiciatis esse perferendis. Dicta tempore dolore laborum iste rerum quis temporibus voluptate itaque maxime commodi! Maiores.

Текст в модальном окне

background-image : url ( "data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23337AB7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e" ) ;

Вариант с использованием флажка

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

Закрытие окна происходит по клику на крестик.

Пример:

Всплывающее (модальное) окно – англ. pop-up – удобный и простой способ вывести какую-то информацию в небольшом отдельном окне, при этом не перегружая основную страницу.
Сами всплывающие окна могут быть очень разными. Можно вывести отдельную целую страницу своего сайта, а можно вывести небольшую текстовую информацию.

Самый простой способ установки всплывающего окна – ссылка

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

Для создания лучше пользоваться отдельным HTML редактором (я пользуюсь DreamWeaver или NotePad++), наполнить страницу необходимым содержимым и сохранить как html файл. Далее загрузить этот файл на свой сайт.

Сам способ по своей структуре – это обычная ссылка с подключением внутри нее JavaScript. Поэтому эту ссылку при редактировании страницы нужно вставлять в режиме HTML в том месте, где Вы ходите чтобы появилась ссылка, при нажатии на которую информация открывается во всплывающем окне.

a href = "javascript:void(0)" onClick = "javascript:window.open('http://Ссылка_на_файл_окна', 'okno', 'width=845, height=400, status=no, toolbar=no, menubar=no, scrollbars=yes, resizable=yes');" > Открыть "Мое всплывающее окно" / a >

Вот пример моего кода, примененного на этой странице:

a href = "javascript:void(0)" onClick = "javascript:window.open('https://stepfor.top/Pages/Vsplivaushee_okno.html', 'okno', 'width=400,height=300,left=250, top=100,status=no,toolbar=no, menubar=no,scrollbars=yes,resizable=yes');" >

Синтаксис window.open

Открытие окна происходит с помощью javascript метода window.open.

window.open ( ‘Ссылка_на_файл_окна’ , ‘Имя_окна’ , ‘Параметры_окна’ ) Ссылка_на_файл_окна – полный путь к Вашему файлу всплывающего, который Вы недавно загрузили на свой сайт.
Имя_окна – имя окна.
Параметры окна (атрибуты) – с помощью атрибутов можно редактировать сам вид кона и его положение на экране. Все атрибуты пишутся через запятую и находятся внутри одинарных кавычек. После атрибута ставится знак = и пишется значение атрибута: цифры или же yes/no.

Например, в коде предоставленном мною окна такие атрибуты:
width=845 (ширина окна)
height=400 (высота окна)
status=no (строку состояния НЕ отображать)
toolbar=no (панель инструментов НЕ отображать)
menubar=(меню НЕ отображать)
scrollbars=yes (отображать полосы прокрутки)
resizable=yes (разрешать пользователю менять размер окна)

Атрибуты всплывающего окна

Атрибут NN IE – Описание
alwaysLowered – Окно всегда над другими
alwaysRised – Окно всегда под другими
channelMode – Показывать содержимое на панели каналов
copyhistory – Перенести новое окно в историю из текущего
dependent – Дочернее окно закроется при закрытии родительского
directories – Показать в новом окне кнопки папок
fullscreen – Не отображать заголовок и меню
height – Размер содержимого окна в пикселях
hotkeys – Отключить клав. сокращения (кроме Quit и Sequrity Info)
innerHeight – Высота содержимого.
innerWidth – Ширина содержимого.
left – Смещение левой границы окна относительно границы экрана
location – Отображать поле адреса
menubar – Отображать меню
outerHeight – Наружная ширина окна
outerWidth – Наружная ширина окна
resizeble – Разрешать польз. менять размер окна
screenX – Смещение левой границы окна от границы экрана
screenY – Смещение верхней границы окна от границы экрана
scrollbars – Отображать полосы прокрутки
status – Отображать строку состояния
titlebar – Отображать строку меню.
toolbar – Отображать панель инструментов
top – Смещение верхней границы окна относительно границы экрана
width – Ширина содержимого.
z-lock – Новое окно фикс. под прочими окнами.

Скрипт вплывающего окна

Окно, которое рассмотрено в этой статье, можно разместить на странице и с помощью полноценного скрипта.

Я думаю, стоит показать вам демонстрацию всплывающего окна:

Итак, чтобы заработало всплывающее окно, пропишите в CSS вот такие стили:

HTML (Ссылки на вызов модальных окон):

HTML (модальное окно):

В строку №4 вставляете содержимое.

Теперь усложним немного задачу. Сделаем так, чтобы всплывающее окно появлялось через указанный промежуток времени . Потом, после закрытия окна, появлялась кнопка для повторного вызова этого же всплывающего окна.
Я думаю, лучше посмотреть работу кода в живую.

Итак, чтобы такого добиться, добавьте в CSS:

JS (тут без этого ни как):

Строка №17 – вы указываете в миллисекундах, когда должно появиться всплывающее окно. В моем случае это 5000 миллисекунд (5 секунд). Кстати, вам наверно будет интересно почитать статью про функцию setTimeout.

Это все, пользуйтесь на здоровье!
Ну и, естественно, не забывайте делиться с друзьями этой информацией!

Читайте также: