» »

Светлое модальное окно 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"

Посмотреть вы можете на сайте Vanna.rem-31.ru, просто нажмите заказ и оно появиться сверху по центру установиться.
11.04.2016 Просмотров: 716 Комментарий: (19)

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

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

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

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