» »

Модальное окно в стили Popup для сайта


Сейчас трудно представить сайт без модального окна, так как оно очень продуктивно на сайте находится и выполняет важные функций. Чтоб вам не делать лишнее страницу и все это создать оригинально, на это и нужно окно. Ведь оно может как вывести описание сайта, так и в него поставить скрипт и он будет полностью работать. Ведь оно как дополнение вашего интернет ресурса и что вы там разместите, все будет зависит от вам и вашей тематике. Если брать изображение к материалу, то администратор сайта его сделал под звонок от пользователя, но теперь можно представить, что можно установить, просто у него тематика такая была. Если вам нужно разместить там статистику, но вы код который в низ сайта ставите, вам там и нужно все делать.

А третий код, это будет надпись, на которую нажимать будут и окно появляться будет. Также идут с ним стили, вы можете сделать его по размерам как вам нужно, возможно что то в дизайне самом поменять. Вообщем основном на конструкторе мне приходилось больше всего видеть в нем код обратной связи, так как там идет оператор, и его можно только установить, но и безусловно, что то от себя добавить. И тогда ваш портал приобретет совершенно другое значение и будет смотреться намного лучше. Что по самому материалу, он как раз простой, там есть кнопка крестик, при наведение на ее она меняется и возможно делает круг, но здесь вы сами уведите эффект который там прописан.

Коды и стили не буду на сайте размешать, вы можете их скачать, все поместил в текстовые документы, что на них написано, что куда нужно установить, вам только останется скопировать.

PS - Для тех кто хочет добавить несколько окон, то меняем ID окна и ID ссылки вызова. Например: здесь id="win1" и здесь href="#win1" и так далее вы можете ставить
19.06.2016 Загрузок: 6 Просмотров: 536 Комментарий: (13)

Поделиться в социальных сетях

Материал разместил

Комментарий: 13
Scheme
Scheme 19.06.2016 02:291
0
Это окно давно поставил, скрипт на форуме от модератора был, самое простое думаю окно, что может поставить каждый.
tsakonter
tsakonter 19.06.2016 02:392
0
Про наведение на крестик отключить, на одном сайте видел, что оно во первых прозрачное и начинает немного в алый цвет делаться и было прокрутка самого обвода.
Админ2339
Админ2339 30.08.2016 20:013
0
Спасибо. Установил себе на сайт. Работает, но нужно, чтобы у окна можно было регулировать размер в CSS при настройке или сделать скролл. Поможете?
Angerfist
Angerfist 30.08.2016 22:144
0
В CSS же всё для настройки есть, и зачем делать фиксированные размеры.
В стилях указали гибкость ширины max-width при обьёме 85%, убрав max зафиксируете размеры окна но потеряете адаптивность к контенту окна.
Админ2339
Админ2339 30.08.2016 22:205
0
Мне нужно модальное окно 800х600px со скроллингом контента внутри (там почтовая форма юкозавская, а она длинная). Она выходит за нижнюю границу сайта, и её самый низ недоступен из-за отсутствия скроллинга внутри окна.
Angerfist
Angerfist 30.08.2016 22:256
0
Ну и и указывайте размеры окна, в width и height устанавливаем нужные нам ширину и высоту окна (за них не будет выходить содержимое окна), а свойством overflow: auto; задаем прокрутку в случае надобности.
Админ2339
Админ2339 30.08.2016 22:337
0
Ерунда какая-то, но это я уже пробовал и это не помогает. Возможно торможу к вечеру. Продолжу завтра, а вам спасибо за отзывчивость.
Angerfist
Angerfist 30.08.2016 22:369
0
Ладно, я если не забуду гляну что можно сделать и выложу css
Админ2339
Админ2339 30.08.2016 22:3711
0
Спасибо.
Angerfist
Angerfist 30.08.2016 22:348
0
Или вместо auto только вертикальную;
Код

overflow-x: scroll; /* прокрутка по горизонтали */
overflow-y: scroll; /* прокрутка по вертикали */
Админ2339
Админ2339 30.08.2016 22:3610
0
Спасибо, завтра попробую. Торможу уже сегодня...
Angerfist
Angerfist 30.08.2016 22:5212
0
Вот держите сделал как просили 800 на 600 px с вертикальной прокруткой, я только кнопку закрыть сдвинул внутрь на 8 px так как скролл мешал:
Код

.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:100%;max-width:800px;max-height:600px;position:fixed;overflow-y: scroll;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: 8px;right: 8px;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)}
Админ2339
Админ2339 31.08.2016 10:1713
0
Да, действительно всё прекрасно заработало. Премного благодарен!
avatar