Как добавить DIV с затемнением сайта

В этой статье я опишу как сделать на сайте интересную фишку. При загрузке посередине экрана появляется табличка (с любым HTML кодом), фон становится темным. Думаю будет полезно 🙂

Для начала нам потребуются библиотеки JQuery и примочка для нее blockUI.

Прикручиваем их вот таким методом где-нибудь между тегами <head></head>:

<script charset="UTF-8" type="text/javascript" src="путь до скрипта/jquery.js"></script>

<script charset="UTF-8" type="text/javascript" src="путь до скрипта/jquery.blockUI.js"></script>

Далее вставляем куда-нибудь в боди вот такую штучку:

<script type="text/javascript">
$(document).ready(function() {
$.blockUI({
message: $(‘#tablichko’) , css: {width: ‘310px’}
});
$(‘.krestik’).click(function() {
$.unblockUI();
return false;
});
});
</script>
<div id="tablichko" style="display:none; cursor: default" class="syuda">
<div class="krestik"></div>
Вот сюда вставляем HTML который нам нужен
</div>

Теперь идем в css и добавляем стиль для кнопочки крестика (которая имеет класс в диве: krestik)

.syuda .krestik {
background-image: url(Путь до крестика/krestik.png);
width: 28px;
height: 15px;
position: absolute;
right: 3px;
top: 3px;
float: right;
display: block;
cursor: pointer;
z-index: 100;
}

Крестик можно скачать по ссылке

Вот вкратце все.

Комментарии через VK
Комментарии NoFAQ.net

Комментарии Вконтакте