• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 2
  • 1
  • 2
  • »
Форум » Web-Раздел » Начинающему вебмастеру » Светлое модальное окна в оттенке для сайта
Светлое модальное окна в оттенке для сайта
Kosten
 		Понедельник, 11 Апреля 2016, 23:26 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Трудно сейчас сайт представить без модальное окна, так как сейчас любой ресурс пользуется им. Ведь это отличное решение вывести информацию с главной странице, где вам не нужно много место, а простой клик, чтоб его открыть. Вы можете поместить туда обратную связь или любой скрипт с информер, который был бы как основа или информация для пользователя.



Установка:

Ставим ссылку вызова, там где вам нужно.

Код
<a href="#win1" rel="nofollow">Открыть окно</a>


Потом саму основу устанавливаем в низ сайта.

Код
<a href="#x" class="overlay" id="win1"></a><div class="popup">Здесь то, что будет в окне. Можно форму обратной связи<a class="close"title="Закрыть" href="#close"></a></div>


И остается разместить стили в CSS на портале.

Код
.overlay{top:0;right:0;bottom:0;left:0;z-index:10;display:none;background-color:rgba(0,0,0,0.65);position:fixed;cursor:default}
.overlay:target{display:block}
.popup{top:-100%;right:0;left:50%;font-size:14px;z-index:20;margin:0;width:85%;min-width:320px;max-width:600px;position:fixed;padding:15px;border:1px solid #383838;background:#FEFEFE;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;font:14px/18px 'Tahoma',Arial,sans-serif;-webkit-box-shadow:0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);-moz-box-shadow:0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);-ms-box-shadow:0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);box-shadow:0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);-webkit-transform:translate(-50%,-500%);-ms-transform:translate(-50%,-500%);-o-transform:translate(-50%,-500%);transform:translate(-50%,-500%);-webkit-transition:-webkit-transform .6s ease-out;-moz-transition:-moz-transform .6s ease-out;-o-transition:-o-transform .6s ease-out;transition:transform .6s ease-out}
.overlay:target+.popup{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);-o-transform:translate(-50%,0);transform:translate(-50%,0);top:20%}
.close{top:-10px;right:-10px;width:20px;height:20px;position:absolute;padding:0;border:2px solid #CCC;-webkit-border-radius:15px;-moz-border-radius:15px;-ms-border-radius:15px;-o-border-radius:15px;border-radius:15px;background-color:rgba(61,61,61,0.8);-webkit-box-shadow:0 0 10px #000;-moz-box-shadow:0 0 10px #000;box-shadow:0 0 10px #000;text-align:center;text-decoration:none;font:13px/20px 'Tahoma',Arial,sans-serif;font-weight:bold;-webkit-transition:all ease .8s;-moz-transition:all ease .8s;-ms-transition:all ease .8s;-o-transition:all ease .8s;transition:all ease .8s}
.close:before{color:rgba(255,255,255,0.9);content:"X";text-shadow:0 -1px rgba(0,0,0,0.9);font-size:12px}
.close:hover{background-color:rgba(252,20,0,0.8);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}


Для тех, кому нужно установить несколько.

Кому нужно добавить несколько окон, то меняем ID окна и ID ссылки вызова. Например: здесь id="win1" и здесь href="#win1"

На этом вся установка завершена.
Прикрепления: 9748896.png (165.8 Kb)
Страна: (RU)
ucozmental
 		Понедельник, 11 Апреля 2016, 23:51 | Сообщение 2
Оффлайн
Пользователи
Сообщений:112
Награды: 0
« 0 »
Но оттенок вокруг, вы можете сами сделать какой вам нужно. Это выставить прозрачность и сделать ту гамму цвета, которая нужна. А что по окну, то мне очень понравилось, без всяких заморочек, можно выставить и не одно.
Страна: (RU)
tsakonter
 		Вторник, 12 Апреля 2016, 00:07 | Сообщение 3
Оффлайн
Пользователи
Сообщений:220
Награды: 0
« 8 »
Тоже что ли на обратную связь поставить, и само окно подходит по дизайн, светлое, то что нужно.
Страна: (RU)
Траст
 		Вторник, 12 Апреля 2016, 00:11 | Сообщение 4
Оффлайн
Пользователи
Сообщений:101
Награды: 0
« 6 »
Просто как рекомендация, если продублировали, то думаю нужно было что то изменить, или края закруглить, или фон немного темнее сделать.
Быстро, дешево и сердито!
Страна: (RU)
csretven
 		Вторник, 12 Апреля 2016, 00:15 | Сообщение 5
Оффлайн
Пользователи
Сообщений:54
Награды: 0
« 0 »
Траст, тоже как совет, может вы что то покажете, мастер класс, на любой мануал, а давать советы, мы все умеем, но не чего не предоставляя.
Страна: (RU)
Kosten
 		Вторник, 12 Апреля 2016, 00:20 | Сообщение 6
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
csretven, но иногда хорошие советы дает, так что Траст, все нормально, вижу что окно понравилось, подмял у же небось. biggrin
Страна: (RU)
Сафрон
 		Вторник, 12 Апреля 2016, 00:27 | Сообщение 7
Оффлайн
Vip
Сообщений:224
Награды: 1
« 6 »
Kosten, да он не по теме постоянно влазит, но да, где то согласен, что дублируешь материал, покажи его в другом ракурсе, но это окно модальное, что теперь в него описание ставить и убирать обратную связь, тем показать что работает, но дали сайт http://vanna.rem-31.ru/ где оно стоит и можете каждый посмотреть как будет отображаться.
Страна: (RU)
Kvint
 		Вторник, 12 Апреля 2016, 00:34 | Сообщение 8
Оффлайн
Пользователи
Сообщений:83
Награды: 0
« 11 »
Красивый сайт, с начало подумал. что шапка под GIF стоит, и фонтан будет бить.
Страна: (RU)
workman
 		Вторник, 12 Апреля 2016, 07:30 | Сообщение 9
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
« 155 »
Да кому нужно, то это окно можно сделать хоть красным, хоть синим, хоть серо-буро-поцарапаным
Всего-лишь навсего в стилях .popup {........... background: #ED1414; ........} поменять цвет на какой вы хотите
Страна: (RU)
workman
 		Вторник, 12 Апреля 2016, 07:32 | Сообщение 10
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
« 155 »
Kvint,
Цитата
... и фонтан будет бить.
Да нет. Бить он не будет. У меня на сайтах все по мирному ... Ну а если серьезно, то, лично я GIFы не рекомендую ставить в шапку сайта так как потом может в смартфонах долго грузиться сайт. А это не есть хорошо.

Сообщение отредактировал
workman - Вторник, 12 Апреля 2016, 07:37
Страна: (RU)
Сопрано
 		Вторник, 12 Апреля 2016, 15:10 | Сообщение 11
Оффлайн
Vip
Сообщений:461
Награды: 4
« 14 »
Стили есть и как пластилин лепи как нужно. biggrin
Страна: (RU)
Kosten
 		Вторник, 12 Апреля 2016, 17:31 | Сообщение 12
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
workman, ты не можешь сделать, на этом модальном окне, функцию обратная связь, пончть как скрипты ставмить, писать, это все понятно, если что замути плиз. wink
Страна: (RU)
workman
 		Вторник, 12 Апреля 2016, 19:00 | Сообщение 13
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
« 155 »
Цитата Kosten ()
ты не можешь сделать, на этом модальном окне, функцию обратная связь,

Так посмотри как у меня. Просто вставить в HTML код формы обратной связи
Вот как пример
Код
<a href="#x" class="overlay" id="win1"></a>
<div class="popup">$MFORM_1$ // Код обратной связи
<a class="close"title="Закрыть" href="#close"></a>
</div>
Страна: (RU)
Kosten
 		Вторник, 12 Апреля 2016, 19:18 | Сообщение 14
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
workman, не так сложно оказалось, а вот эту строку нужно думаю убрать.

[info]// Код обратной связи[/info]
Страна: (RU)
workman
 		Вторник, 12 Апреля 2016, 19:49 | Сообщение 15
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
« 155 »
Kosten, Это я просто тебе подсказывал ... Конечно нужно убрать
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Светлое модальное окна в оттенке для сайта
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск: