ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Модальное окно в стили Popup для сайта

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

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

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

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

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

19 Июня 2016 Загрузок: 7 Просмотров: 1370 Комментариев: (13)

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

СКАЧАТЬ

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

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 13
Порядок вывода комментариев: Scheme 19 Июня 2016 02:29¹ 0 Это окно давно поставил, скрипт на форуме от модератора был, самое простое думаю окно, что может поставить каждый. tsakonter 19 Июня 2016 02:39² 0 Про наведение на крестик отключить, на одном сайте видел, что оно во первых прозрачное и начинает немного в алый цвет делаться и было прокрутка самого обвода. Админ2339 30 Августа 2016 20:01³ 0 Спасибо. Установил себе на сайт. Работает, но нужно, чтобы у окна можно было регулировать размер в CSS при настройке или сделать скролл. Поможете? Angerfist 30 Августа 2016 22:14⁴ 0 В CSS же всё для настройки есть, и зачем делать фиксированные размеры. В стилях указали гибкость ширины max-width при обьёме 85%, убрав max зафиксируете размеры окна но потеряете адаптивность к контенту окна. Админ2339 30 Августа 2016 22:20⁵ 0 Мне нужно модальное окно 800х600px со скроллингом контента внутри (там почтовая форма юкозавская, а она длинная). Она выходит за нижнюю границу сайта, и её самый низ недоступен из-за отсутствия скроллинга внутри окна. Angerfist 30 Августа 2016 22:25⁶ 0 Ну и и указывайте размеры окна, в width и height устанавливаем нужные нам ширину и высоту окна (за них не будет выходить содержимое окна), а свойством overflow: auto; задаем прокрутку в случае надобности. Админ2339 30 Августа 2016 22:33⁷ 0 Ерунда какая-то, но это я уже пробовал и это не помогает. Возможно торможу к вечеру. Продолжу завтра, а вам спасибо за отзывчивость. Angerfist 30 Августа 2016 22:36⁹ 0 Ладно, я если не забуду гляну что можно сделать и выложу css Админ2339 30 Августа 2016 22:37¹¹ 0 Спасибо. Angerfist 30 Августа 2016 22:34⁸ 0 Или вместо auto только вертикальную; Код overflow-x: scroll; /* прокрутка по горизонтали / overflow-y: scroll; / прокрутка по вертикали */ Админ2339 30 Августа 2016 22:36¹⁰ 0 Спасибо, завтра попробую. Торможу уже сегодня... Angerfist 30 Августа 2016 22:52¹² 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 31 Августа 2016 10:17¹³ 0 Да, действительно всё прекрасно заработало. Премного благодарен!