» »

Модальное окно на красивом эффекте


Модальное окно на красивом эффекте

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

Чтоб посмотреть реально как выглядеть все будет, то вам предоставляется демонстрация с источника.

Установка:

Нужно скачать архив, где одна папка с файлом и еще стили идут и под названием cool-box и закинуть файловый менеджер, или просто в корень сайта.

Потом ставим стили css перед закрывающим тегом /head можно вверх сайта.

Код
<link rel="stylesheet" href="/cool-box/style.css">


Заходим в ни сайта и перед /body если там есть, ставим саму основу нашего окна.

Код
<script src="/cool-box/main.js"></script>  
<div class="cd-modal">  
<div class="modal-content">  
<h1>Немного о системе uCoz</h1>  
<p>Содержимое окна.</p>  
</div>  
<a href="#0" class="modal-close">закрыть</a>  
</div>  
<div class="cd-transition-layer">  
<div class="bg-layer"></div>  
</div>


И теперь только кнопка или название, что вас устраивает по дизайн, ставим ее для вызова.

Код
<a href="#" class="cd-btn cd-modal-trigger">название окна</a>


На этом все установили.
17.09.2016 Загрузок: 5 Просмотров: 350 Комментарий: (12)

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

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

Комментарий: 12
avatar
Start 17.09.2016 22:301
0
В CSS изображение присутствуют!эти изображение в демо есть, а в скачке, их нет.

Код
http://zornet.ru/Ajaxoskrip/Abaveg/modal-bg.jpg
http://zornet.ru/Ajaxoskrip/Abaveg/ink-separation.svg
http://zornet.ru/Ajaxoskrip/Abaveg/cd-icon-close.svg
http://zornet.ru/Ajaxoskrip/Abaveg/ink.png
Kosten
Kosten 18.09.2016 08:542
+1
Start, все понятно, немного отредактировал.
avatar
Start 18.09.2016 12:083
0
Так-же, -в окне показывается модер кн. и меню, вот код для решения:
.cd-modal {z-index:100000!important;}
Brung
Brung 18.09.2016 14:024
0
Но так это не похоже на модальное окно, а как отдельная страница.
avatar
Start 18.09.2016 14:085
0
почему -же? нажимаешь на надпись, просто фон затемняет всё остальное и появляется что вам надо например текст...
Brung
Brung 18.09.2016 17:196
0
Про то, что на весь монитор, и такое ощущение как новая страница.
avatar
Start 18.09.2016 18:327
0
Прикольно -же)
Brung
Brung 18.09.2016 18:498
0
С красивым эффектом пойдет.
afilenko77
afilenko77 09.10.2016 22:319
0
У меня вообще ни чего не происходит.При нажатии на ссылку остается все как и было.
afilenko77
afilenko77 09.10.2016 22:3410
0
Подскажите как вывести ссылку вот в это меню?
Код
<span class="center-wrap"><a class="center Inactive" href="#page5">FAQ</a></span>
Kosten
Kosten 09.10.2016 23:0511
0
Для вызова этот код, туда ссылку прописываем, куда вам нужно.

Код
<a href="#" class="cd-btn cd-modal-trigger">название окна</a>
Kosten
Kosten 09.10.2016 23:0712
0
Это же окно на весь экран, вам бы лучше другое модальное окно, в поиск вбейте на сайте модальное окно на CSS и подберете что вам нужно.
avatar