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

Светлое модальное окно Workman для uCoz

Светлое модальное окно Workman для uCoz
Очередное простое и в тоже время полностью рабочее модальное окно на ваш сайт. Где вы можете разместить любую функцию, от заказа до до информер на сайте. Ставят его основном, чтоб ваш портал был функционален, что делает его для пользователя приемлемым и удобным. Здесь мы не чего заливать не будем, а разместим сам скрипт и стили на его. Также у него кнопка отключить прозрачная, что сразу можно заметить. Теперь вы можете вывести любую вам информацию в нем, а не где то на странице прописывать. При появление, становиться светло темный фон вокруг его, что все внимание идет, на информацию, размещенная в окне, что не чего не отвлекает.

Установка:

В низ сайта, что в этом коде и будете писать или ставить под название.

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


Эту ссылку по месту вызова

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


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"

Посмотреть вы можете на сайте, просто нажмите заказ и оно появиться сверху по центру установиться.
2016-04-11 Просмотров: 1978 Комментарий: (19)

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

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

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

Комментарий: 18
Сопрано
Сопрано 2016-04-11 23:491
0
Думаю по установке самое то, что справиться любой, вот мне нравится как здесь на сайте, без углов, думаю в стилях можно вывести, если нет, так поставить.
ucozmental
ucozmental 2016-04-11 23:522
0
Но есть по установке такие, как на фейсбук, которое здесь на сайте есть и ставил его также.
Kosten
Kosten 2016-04-12 00:215
0
Но так то соглашусь. что по сути установка у них одинакова, но есть такие окна, где нужно в файловый менеджер заливать файлы.
Maryges
Maryges 2016-04-11 23:573
0
Модальное окно с дизайн от сайта facebook, которое здесь, так там вообще в скрипте все прописано и не нужно в CSS лести, но соглашусь, работает по такому же принципу.
csretven
csretven 2016-04-12 00:134
0
Но если ставить обратную связь. то там можно как понял, просто оператор поставить и по идее должно все появиться, а значит операторы работают в нем.
Tergran
Tergran 2016-04-12 00:236
0
Вот темное бы на сайт залили бы, то одно нашел, как раз по дизайн нужное, все правильно сделал, оно открывается и сразу закрывается, в чем проблема может быть.
Kvint
Kvint 2016-04-12 00:338
0
Тоже была с темным окном, та же история, с вебочки брал и оно не успев раскрыться, сразу закрывалось. Не понимал. так как знаю, что рабочие, с вебочки брал и на нем demo стояло.
Сопрано
Сопрано 2016-04-12 00:369
0
А что хоть за дизайн, что не можете показать. посмотреть, просто тоже темные окна нравятся, они на светлый также хорошо подходят.
FeStemBer
FeStemBer 2016-04-12 00:4811
0
На сайте, что ты указал, нет не какого демо, а просто скачать и коды по установке окна.
Сафрон
Сафрон 2016-04-12 00:287
0
Мне интересно, а как можно информер в него поставить, это также как оператор ставить.
Tergran
Tergran 2016-04-12 00:4610
0
Вот это окно, может кто ставил его, может объяснить, как правильно делать в установке. Все делаю как написано, но не выводит и пропадает, не успевая появиться.

workman
workman 2016-04-12 07:2613
0
а где ссылка то на сайт?
Tergran
Tergran 2016-04-12 13:1214
0
Вот ссылка на темное окно, посмотрите что можно сделать и как правильно установить.
workman
workman 2016-04-12 14:0217
0
Там в нем не правильно прописаны ID вызовы. Кто-то откуда-то снял и установил на раздачу без проверки. ем тебе этот не нравится который выложен? Если что не понятно в нем то добро пожаловать на форум
Kosten
Kosten 2016-04-12 14:4518
0
workman, привет брат, сделай его как нужно, но рельно такое нормальное окно.
workman
workman 2016-04-12 07:2512
0
Да кому нужно, то это окно можно сделать хоть красным, хоть синим, хоть серо-буро-поцарапаны
Всего-лишь навсего в стилях .popup {........... background: #ED1414; ........} поменять цвет на какой вы хотите
Tergran
Tergran 2016-04-12 13:1315
0
Красный не очень подходит, слишком яркий. Но как понимаю, что просто на любой можно сменить.
workman
workman 2016-04-12 13:5816
0
Правильно понимаешь
avatar