Важная информация!
Правила форума
для обязательного прочтения!
Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
(забыл / потерял пароль)
Общий FAQ по управлению форумом
FAQ: реклама на форуме
Туториалы по разным функциям ваших форумов
Алфавитный указатель
Интересные решения для форумов
Наши видео-туториалы
Условия пользования сервисом
Ссылки на полезные ресурсы
Последние темы
» Не корректное отображение картинокавтор Luz Сегодня в 12:40
» Переход с 2x2forum.ru на 2x2forum.com
автор Luz Сегодня в 12:13
» Проблема с метатегом Description
автор VeraLV Март 18th 2024, 15:31
» 1 марта будет запрет на ВПН, это отразится на работе платформы?
автор Svet007 Март 14th 2024, 11:43
» нужен скрипт сумма просмотров тем в разделе
автор лексей2222 Март 5th 2024, 07:37
» Новое: Откройте для себя функцию "Подписка на пользователей"
автор лексей2222 Март 1st 2024, 17:26
» 301 редирект
автор Dana Domirani Февраль 25th 2024, 18:28
» Помощь в нескольких вопросах по форуму
автор лексей2222 Февраль 22nd 2024, 13:21
» [Общая тема] Что делать, если вы забыли / потеряли пароль
автор Dana Domirani Февраль 14th 2024, 00:54
» Загрузка форума
автор лисенок Февраль 13th 2024, 01:09
Всплывающее окно
Страница 1 из 1
Всплывающее окно
Пример всплывающего окна, в котором можено разместить любую необходимую информацию: правила форума, форму авторизации и пр.
Окно открывается кликом по кнопке:
1. Добавьте код кнопки, которая будет по клику открывать всплывающее окно:
Вместо текста "Открыть окно!" можно вставить картинку. В таком случае код кнопки будет выглядеть так:
Ссылку https://i.servimg.com/u/f38/18/40/24/57/shop_o10.png замените на свою картинку.
Куда добавлять:
- в виджет (см. тему как работать с виджетами)
- туда, где лично вам нужна эта кнопка (в шаблон, в меню навигации, в шапку форума и т.д.)
2. Добавьте код самого окна:
Ваш собственный контент размещайте в указанном коде между тегами
Куда добавлять готовый код:
- в виджет (см. тему как работать с виджетами)
- в шаблон overall_footer_end (Конец нижней части страницы) перед тегом </body>, после этого не забыть сохранить и опубликовать шаблон кнопкой
3. В CSS добавьте настройки для кнопки и окна:
Окно открывается кликом по кнопке:
1. Добавьте код кнопки, которая будет по клику открывать всплывающее окно:
- Код:
<!— Кнопка для запуска всплывающего окна -->
<div class="main2">
<div class="panel2">
<a id="login_pop" href="#login_form">Открыть окно!</a>
</div>
</div>
Вместо текста "Открыть окно!" можно вставить картинку. В таком случае код кнопки будет выглядеть так:
- Код:
<!— Кнопка для запуска всплывающего окна -->
<div class="main2">
<div class="panel2">
<a href="#login_form" id="login_pop"><img src="http://i38.servimg.com/u/f38/18/40/24/57/shop_o10.png" title="" alt="" /></a>
</div>
</div>
Ссылку https://i.servimg.com/u/f38/18/40/24/57/shop_o10.png замените на свою картинку.
Куда добавлять:
- в виджет (см. тему как работать с виджетами)
- туда, где лично вам нужна эта кнопка (в шаблон, в меню навигации, в шапку форума и т.д.)
2. Добавьте код самого окна:
- Код:
<!— Начало модального окна -->
<a id="login_form" class="overlay" href="#x"></a>
<div class="popup">
<!— Начало содержания модального окна -->
<h2>Заголовок окна</h2>
<p>Здесь содержание окна</p>
<p>Здесь содержание окна</p>
<p>Здесь содержание окна</p>
<!— Конец содержания модального окна -->
<a href="#close" class="close"></a>
</div>
<!— Конец модального окна -->
Ваш собственный контент размещайте в указанном коде между тегами
- Код:
<!— Начало содержания модального окна -->
сюда ставите свой текст, картинки и пр.
<!— Конец содержания модального окна -->
Куда добавлять готовый код:
- в виджет (см. тему как работать с виджетами)
- в шаблон overall_footer_end (Конец нижней части страницы) перед тегом </body>, после этого не забыть сохранить и опубликовать шаблон кнопкой
3. В CSS добавьте настройки для кнопки и окна:
- Код:
.panel2 {
padding: 10px;
text-align: center;
}
/* кнопка открыть окно */
.panel2 a#login_pop {
margin: .4em;
padding: 1em;
cursor: pointer;
background-color: #e1e1e1; /* цвет фона */
text-decoration: none;
color: #666666; /* цвет текста */
display: inline-block;
position: relative;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.panel2 a#login_pop:before {
content: '';
position: absolute;
border: #e1e1e1 solid 4px;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-property: top, right, bottom, left;
transition-property: top, right, bottom, left;
}
.panel2 a#login_pop:hover:before {
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
}
.overlay {
background-color: rgba(0, 0, 0, 0.6);
bottom: 0;
cursor: default;
left: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
visibility: hidden;
z-index: 1;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
/* вспывающее окно */
.popup {
background-color: #fff; /* цвет фона */
border: 3px solid #fff; /* бордюр */
display: inline-block;
left: 50%;
opacity: 0;
padding: 15px;
position: fixed;
text-align: justify;
top: 40%;
visibility: hidden;
z-index: 10;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-webkit-transition: opacity .5s, top .5s;
-moz-transition: opacity .5s, top .5s;
-ms-transition: opacity .5s, top .5s;
-o-transition: opacity .5s, top .5s;
transition: opacity .5s, top .5s;
}
.overlay:target+.popup {
top: 50%;
opacity: 1;
visibility: visible;
}
/* кнопка закрыть */
.close {
background-color: rgba(0, 0, 0, 0.8); /* цвет фона */
height: 30px;
line-height: 30px;
position: absolute;
right: 0;
text-align: center;
text-decoration: none;
top: -15px;
width: 30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
}
.close:before {
color: rgba(255, 255, 255, 0.9); /* цвет */
content: "X"; /* иконка x */
font-size: 24px; /* размер иконки */
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
background-color: rgba(64, 128, 128, 0.8); /* цвет иконки при наведении */
}
.popup p, .popup div {
margin-bottom: 10px;
}
Где находится CSS? Па > Оформление > Цвета > Каскадная таблица стилей CSS Где искать основные шаблоны? ПА > Оформление > Шаблоны > Общие настройки Где находится раздел для подключения скриптов ПА > Модули > Управление кодами Javascript |
Похожие темы
» Всплывающее окно для зарегистрированных
» Всплывающее окно
» Всплывающее окно
» Всплывающее окно для незарегестрированных
» Всплывающее окно
» Всплывающее окно
» Всплывающее окно
» Всплывающее окно для незарегестрированных
» Всплывающее окно
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения