» »

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


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

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

Установка:

Ставим там, где была бы видна надпись, чтоб вызвать.

Код
<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="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/0RkdGde.png"></a>
<h4>Название модального окна</h4>

Здесь пишем статью или правила сайта, также можете поставить скрипт, как форму входа. Или если есть код онлайне, его так даже можно установить, будем считать что это есть дополнение сайта.  
   
</div>
<div id="mask"></div>
</div>
<a href="#dialog" name="modal">Кликни сюда и дверь откроется</a>


Теперь разберемся, кто будет ставить на сайт uCoz, в коде вам нужно найти один скрипт.

Код
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


И вам нужно его удалить, так как на системе оно не нужно, и все будет отлично работать.
22.04.2016 Просмотров: 431 Комментарий: (4)

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

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

Комментарий: 4
FeStemBer
FeStemBer 22.04.2016 03:121
0
Вот понимаю, нормальное окошко, поставил куда надо и все. Не нужно не чего грузить, остается только что нудно написать в нем или установить, ты Костен попробуй поставить оператор, к примеру обратная связь и посмотри будет работать.
Kosten
Kosten 22.04.2016 03:182
0
Но обратная связь идет скриптом, вообщем только его нашел, но почему то капчу не выводит, что то не правильно сделал или просто нужно заняться, мое дело проверить окно, чтоб показывало. И так посмотрел, вот что получилось.

Kosten
Kosten 22.04.2016 03:293
0
Все нормально, с операторами работает отлично, вот поставил обратную связь как нужно и капча, вообщем все появилось.

csretven
csretven 22.04.2016 18:464
0
Так это модальное окно, сделано чисто на стилях, в первые вижу, если скрипт на uCoz не нужен. Нужно попробовать поставить, как понял на скрипт не так сильно идет, а вот на операторах оно работает.
avatar