Как добавить 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;
}
Крестик можно скачать по ссылке
Вот вкратце все.