Задача. Необходимы простые, несложные заготовки всплывающего окна на HTML (popup-окно, модальное окно).
Решение. Можно использовать несколько примеров, как на HTML и CSS, так и с использованием JavaScript.
Заготовка простого всплывающего popup-окна на HTML и CSS
Решение взято с itchief.ru
Всего нужно будет три блока кода:
Пример: Что такое всплывающее окно
- Содержание
- Содержание
- Содержание
- Содержание
Используем Код №1:
/* Стили всплывающего окна по-умолчанию */
position : fixed ; /* фиксированное положение */
background : rgba ( 0,0,0,0.5 ) ; /* фон */
z-index : 1050 ;
opacity : 0 ; /* по умолчанию модальное окно прозрачно */
-webkit-transition : opacity 200ms ease-in ;
-moz-transition : opacity 200ms ease-in ;
transition : opacity 200ms ease-in ; /* анимация перехода */
pointer-events : none ; /* элемент невидим для событий мыши */
padding : 0 ;
/* При отображении модального окно */
.modal:target <
opacity : 1 ; /* делаем окно видимым */
pointer-events : auto ; /* элемент видим для событий мыши */
overflow-y : auto ; /* добавляем прокрутку по y, когда элемент не помещается на страницу */
/* ширина модального окна и его отступы от экрана */
.modal-dialog <
position : relative ;
width : auto ;
margin : 10px ;
.modal-dialog <
max-width : 500px ;
margin : 30px auto ; /* отображение окна по центру */
/* Стили для блока с контентом окна */
.modal-content <
position : relative ;
display : -webkit-box ;
display : -webkit-flex ;
display : -ms-flexbox ;
display : flex ;
-webkit-box-orient : vertical ;
-webkit-box-direction : normal ;
-webkit-flex-direction : column ;
-ms-flex-direction : column ;
flex-direction : column ;
background-color : #fff ;
-webkit-background-clip : padding-box ;
background-clip : padding-box ;
border : 1px solid rgba ( 0,0,0,.2 ) ;
border-radius : .3rem ;
outline : 0 ;
.modal-content <
-webkit-box-shadow : 0 5px 15px rgba ( 0,0,0,.5 ) ;
box-shadow : 0 5px 15px rgba ( 0,0,0,.5 ) ;
/* Стили заголовка окна */
.modal-header <
display : -webkit-box ;
display : -webkit-flex ;
display : -ms-flexbox ;
display : flex ;
-webkit-box-align : center ;
-webkit-align-items : center ;
-ms-flex-align : center ;
align-items : center ;
-webkit-box-pack : justify ;
-webkit-justify-content : space-between ;
-ms-flex-pack : justify ;
justify-content : space-between ;
padding : 15px ;
border-bottom : 1px solid #eceeef ;
.modal-title <
margin-top : 0 ;
margin-bottom : 0 ;
line-height : 1.5 ;
font-size : 1.25rem ;
font-weight : 500 ;
/* Стили кнопки «х» («Закрыть») */
float : right ;
font-family : sans-serif ;
font-size : 24px ;
font-weight : 700 ;
line-height : 1 ;
color : #000 ;
text-shadow : 0 1px 0 #fff ;
opacity : .5 ;
text-decoration : none ;
/* Стили для закрывающей кнопки в фокусе или наведении */
.close:focus, .close:hover <
color : #000 ;
text-decoration : none ;
cursor : pointer ;
opacity : .75 ;
/* Стили блока основного содержимого окна */
position : relative ;
-webkit-box-flex : 1 ;
-webkit-flex : 1 1 auto ;
-ms-flex : 1 1 auto ;
flex : 1 1 auto ;
padding : 15px ;
overflow : auto ;
Код №1: Заготовка простого всплывающего popup-окна HTML + CSS
Заготовка в плагине для WordPress
Решение 2. Собрал простой плагин popup-окон для сайтов на WordPress. В нем всего 3 файла: .php — макет окон; .js — привязка к триггеру; .css — стили. Пример содержимого в Кодах 2.
Плавающие окна на android
Плавающие окна На ксяоми
Скачать заготовку плагина всплывающих окон popup-custom для WordPress.
Собственно, решил сделать кастомное решение в ситуации, когда кнопки-триггеры на карточке товаров подгружались уже после загрузки всего документа, Ajax-ом. Поэтому попап-формы реализуемые плагинами не срабатывали — скрипт плагина загрузился, собрал триггеры на странице, но нужных мне кнопок еще нет, они появятся при взамодействии пользователя с карточками товаров. А используя кастомное решение, можно в кнопку стригером вставить событие onfocus , которое будет запускать функцию привязки тригера к окну — onmouseover=»showModal(trigger, idForm)» .
Источник: wpcraft.top
Как сделать, чтобы диалог в «ВКонтакте» отображался в отдельном окне?
Непонятно: иногда диалоги отображаются на общей странице. Иногда — в отдельном всплывающем окне, на фоне общей страницы. Второй вариант мне удобнее. Как вызвать этот вариант всплывающего окна при ведении диалога в «ВКонтакте?»
комментировать
в избранное up —>
Невоз мутим ый Дождь [161K]
3 года назад
Когда сообщение от вашего собеседника приходит и оно отображается в левом нижнем углу экрана, то желательно вам успеть его активизировать. Автоматически появится окно в правом нижнем углу экрана, где и будет отображаться ваш диалог с собеседником в сжатом формате окна. Его вы можете «перетащить» для удобства в любую область экрана.
Ещё один способ добиться желаемого. Когда вы открываете «сообщения» в ВК, в том же правом нижнем углу появляется лента с логотипами аватарок ваших друзей. Активировав нужного вам пользователя, вы начнёте диалог с ним в отдельном окне. Чтобы закрыть диалог, достаточно нажать на крестик в верхнем углу окна.
Так вы можете и общаться, и просматривать, допустим, ленту новостей, страницы других пользователей и другое.
Источник: www.bolshoyvopros.ru
Как сделать pop-up окно с виджетами для подписки на группы в ОК и ВК
Привет всем! Быть может кто-то недавно делал подобное или видел подробную инструкцию как сделать pop-up окно с виджетами ВК и ОК и предложением подписаться на группы? Вот пример чего хотелось бы: http://joxi.ru/V2VKB8PU5LdjAv Сам сайт если что: http://trendymen.ru Буду благодарен вашим советам.
► Лучший хостинг для сайтов ( https://vk.cc/a9FN77 )
- Виджет для перевода статьи в подкаст?
- Позиции сайтов с обманными pop-up элементами будут понижаться в результатах поиска Яндекса
- DLE и авторизация ВК
На сайте с 26.05.2013
6 сентября 2015, 18:49
Модальное окно + маленький JavaScript для запоминания куки. Делается за 2 минуты.
Как поставить куки:
//Куки
function SetCookie(id, days)<
var ws=new Date();
ws.setDate((days-0+ws.getDate()));
document.cookie=id+»; path=/; expires fquote»>onclick
Понятно, что окно выводим, если куки нет. Это можно сделать несколькими способами. Например, на PHP:
Или на Javascrpt
if(document.cookie.indexOf(«zzz=1») != -1) < document.getElementById(‘id_ELEMENTA’).style.display=’none’; >
Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
На сайте с 12.03.2006
6 сентября 2015, 19:12
DiKiJ, оно конечно все это хорошо))) но хотелось бы готовый вариант, вдруг кто видал или имеет на руках))
А еще лучше будет, если вдруг кто видел какой-нить подобный плагин для DLE.
На сайте с 12.06.2015
7 сентября 2015, 02:02
stryker:
pop-up окно с виджетами ВК и ОК и предложением подписаться на группы?
Буду благодарен вашим советам.
Не делайте этот мусор — реально раздражает. Хочется уйти с сайта и больше никогда на него не возвращаться.
Если хотите сделать подписку — сделайте после статьи, или аккуратно в уголке (даже всплывающим можно), но только, чтобы оно не загораживало контент и уж тем более, не затеняла весь сайт.
На сайте с 09.10.2009
7 сентября 2015, 05:19
A007MP:
Не делайте этот мусор — реально раздражает. Хочется уйти с сайта и больше никогда на него не возвращаться.
Если хотите сделать подписку — сделайте после статьи, или аккуратно в уголке (даже всплывающим можно), но только, чтобы оно не загораживало контент и уж тем более, не затеняла весь сайт.
Ну и что мы тут делаем?)
Источник: searchengines.guru