Всплывающее окно при входе на сайт на CSS3. Всплывающее окно joomla 3 при входе на сайт
Всплывающее окно при входе на сайт на CSS3
.cover {
height: 100%;
width: 100%;
position: absolute;
z-index: 1;
}
.blur-in {
-webkit-animation: blur 2s forwards;
-moz-animation: blur 2s forwards;
-o-animation: blur 2s forwards;
animation: blur 2s forwards;
}
.blur-out {
-webkit-animation: blur-out 2s forwards;
-moz-animation: blur-out 2s forwards;
-o-animation: blur-out 2s forwards;
animation: blur-out 2s forwards;
}
@-webkit-keyframes blur {
0% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
100% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
}
@-moz-keyframes blur {
0% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
100% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
}
@-o-keyframes blur {
0% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
100% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
}
@keyframes blur {
0% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
100% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
}
@-webkit-keyframes blur-out {
0% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
100% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
}
@-moz-keyframes blur-out {
0% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
100% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
}
@-o-keyframes blur-out {
0% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
100% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
}
@keyframes blur-out {
0% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
100% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
}
.content {
width: 650px;
margin: 0 auto;
padding-top: 100px;
}
span {
color: dimgray;
}
.pop-up {
position: fixed;
margin: 5% auto;
left: 0;
right: 0;
z-index: 2;
}
.box {
background-color: whitesmoke;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
position: relative;
-webkit-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
}
.button {
margin 0 auto;
background-color: #FF8566;
margin-bottom: 33px;
}
.button:hover {
background-color: #7CCF29;
-webkit-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
}
www.rudebox.org.ua
как создать всплывающее окно с помощью плагина JCE Media Box
Главная » Новости
Опубликовано: 12.07.2018
Создание всплывающего окна. Самые оптимальные способыСегодня практически на каждом сайте можно встретить всплывающие (модальные) окна, которые содержат разнообразную информацию и существенно уменьшают количество контента на странице. Очень удобный функционал. В этой статье я расскажу, как создавать всплывающие (модальные) окна в Joomla 3 на примере функции " Заказать звонок "
Создание всплывающего окна при закрытии страницыСуществует много различных решений для создания всплывающих окон, но сегодня мы поговорим о плагине JCE Media Box . Он установлен по умолчанию во всех наших шаблонах (скачать его можно бесплатно с оф. сайта JCE).
C помощью этого плагина мы сможем оставить сообщение благодарности после отправки формы в этом же всплывающем окне, что бывает просто необходимо. Поэтому, для реализации всплывающих окон, мы выбрали именно этот плагин.
создание всплывающего окнаНачнем с того, что настроим сам плагин. Для этого перейдем Расширения/Менеджер плагинов и выберем плагин System - JCE MediaBox . И настраиваем как нужно. Настроек достаточно много и все они достаточно хорошо описаны, поэтому на этом останавливаться я не буду.
После того, как выбрали все нужные настройки Сохраняем и переходим к элементу (ссылке, кнопке, изображению), при клике на который должно открываться всплывающее окно .
Я делаю функцию "Заказать звонок", поэтому подразумеваем, что у меня уже создана и настроена форма заказа звонка (у меня она в сделана в компоненте RS Form), а так же для нее создан пункт меню.
Задаем элементу (как задавать ссылки я описал в предыдущей статье ). Выбираем нужный пункт меню, а далее переходим на вкладку Всплывающие окна , на которой выбираем именно JCE MediaBox Popup .
serialynatv.ru
Настройка модуля всплывающего окна MooPopUp для Joomla
class="eliadunit">Установка модуля MooPopUp, который будет выводить всплывающим окном сообщения для посетителей сайта не вызовет никаких сложностей – он устанавливается так же как и другие компоненты замечательной системы управления сайтом, по имени Joomla.
После того, как модуль установлен, остается его включить. И можно заняться настройкой MooPopUp. Для этого надо кликнуть по названию модуля, а всплывающая подсказка покажет, что вы собираетесь его изменить и откроется окно настроек…
Как видите, настроек достаточно много. Рассмотрим их внимательней.
Первое окошко позволяет заменить текст, который будет содержаться во всплывающем окне. Окно Button Title – позволяет изменить текст на кнопке, позволяющей закрыть окно, Окошко Box Title – дает возможность заменить текст заголовка окна. Параметры модуля «Ширина» и Heigh (высота) говорят сами за себе – они дают возможность управлять размерами окна. Попробуем изменить эти параметры и посмотрим, что получится:
Как видите, все получилось…Размеры и положение всплывающего окна мы не меняли, а вот текст изменили…
Вернемся к настройкам. Draggeble Box – это возможность зафиксировать окно на месте или позволить пользователю его перетаскивать. По умолчанию – оно подвижное…
Следующая кнопка Set Cockie отключена. Возможность включения или отключения файлов cookie даст вам возможность настроить показ всплывающего окна только один раз или при каждом обновлении или загрузке страницы.
Кнопка Display Moo Popup – это параметр, который указывает, будет ли данный модуль отображаться во всех браузерах или только для Internet Explorer версии 6.
Display on specific Itemid дает возможность показа всплывающего окна для всего сайта или лишь для отдельных пунктов меню.
Выпадающее меню Style дает возможность выбора одного из шести стилей оформления всплывающего окна. Попробуем изменить стиль. Выбрав стиль 3 мы получаем окошко нашего модуля уже голубого цвета…
Последний параметр устанавливает – будут ли окно видеть все пользователи, только зарегистрированные или только незарегистрированные.
Самостоятельно меняя настраиваемые параметры, вы сможете добиться нужного вам эффекта отображения всплывающего окна, который выводит модуль MooPopUp.
class="eliadunit">joomla-school.com
