Модальное окно с затемнением экрана - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Четверг, 08.12.2016
Скрипты для uCoz » Окна для сайта uCoz » Модальное окно с затемнением экрана

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



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

Модальное окно с эффектом затемнения и плавным появлением, работает при наличии подключенной библиотеке jQuery. Принцип работы модального окна:
1. Нажимаем на кнопку или ссылку - >
2. Экран затемняется и строго по центру появляется модальное окно.
3. Контентом модального окна может быть любая информация, в том числе форма обратной связи или МИНИ-ЧАТ.






Код для установки


<style>
#mask {
position:absolute;
left:-1px;
top:-1px;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:fixed;
display:none;
z-index:9999;
}
#boxes #dialog h4 {text-align:center;}
#boxes #dialog {
background-color: #f3f3f3;
border: 1px solid #dedede;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
box-shadow: 0px 0px 30px rgba(0,0,0,0.2);
-webkit-transition: 0.4s ease-out;
-moz-transition: 0.4s ease-out;
-ms-transition: 0.4s ease-out;
transition: 0.4s ease-out;
text-align: center;
font-size: 14px;
width:500px;
height:450px;
}
.close {margin:0 0 0 470px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('a[name=modal]').click(function(e) {
e.preventDefault();
var id = $(this).attr('href');
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$('#mask').css({'width':maskWidth,'height':maskHeight});
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
var winH = $(window).height();
var winW = $(window).width(); $(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
$(id).fadeIn(2000); });
$('.window .close').click(function (e) {
e.preventDefault();
$('#mask, .window').hide();
});
$('#mask').click(function () { $(this).hide();
$('.window').hide();
});
});
</script>
<div id="boxes">
<div id="dialog" class="window">
<a class="close" href="#"><img src="//www.proaqua31.ru/close.png"></a>
<h4>Название модального окна</h4>
Ваше содержимое окна
</div>
<div id="mask"></div>
</div>
<a href="#dialog" name="modal">Открыть модальное окно</a>



DEMO

Дополнительная информация

Материал выложен пользователем MasterBel, работоспособность кода проверена администратором сайта.
1. Демонстративный код для установки содержит библиотеку jQuery выделенную красным цветом, если Ваш сайт находится в системе uCoz, скрипт библиотеки нужно будет удалить (выделенное красным цветом)
2. Дополнительная ссылка на используемое изображение
3. Для проверки материала на работоспособность, нажмите на картинку в нижнем левом углу страницы, откроется панель управления. Выберите "Редактор HTML", поместите "Код для установки" в редактор и нажмите для его отображения в действии.









Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 3349 | Добавил: MasterBel | Рейтинг: 3.0/1

    Вы будете первый кто оставит комментарий

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]