Сделайте прозрачное наложение на странице Jquery
Эй, как я могу сделать его так, чтобы был в основном просто полу прозрачный цвет, покрывающий целую страницу за исключением 1 отделения (который будет сообщением),
В основном фон загрузок страницы покрыт полу прозрачной чернотой, но определенное отделение (окно сообщения в этом случае) остается нормальным.
Спасибо
3 ответа
Вы можете попробовать blockUI http://malsup.com/jquery/block/
Плагин jQuery BlockUI позволяет моделировать синхронное поведение при использовании AJAX без блокировки браузера [1]. При активации он предотвращает действия пользователя со страницей (или частью страницы) до тех пор, пока она не будет деактивирована. BlockUI добавляет элементы в DOM, чтобы придать ему вид и поведение блокировки взаимодействия с пользователем ...
[1] Использование объекта
XMLHttpRequestв синхронном режиме приводит к блокировке всего браузера до тех пор, пока удаленный вызов завершается. Обычно это нежелательное поведение.
Сделайте что-то вроде этого:
html
<div id="lightbox_background">
<div id="lightbox_container">
<div id="lightbox_header">
<span class="close"><a href="javascript:void(0);" onclick="activity_feed_close()">close</a> <a href="javascript:void(0);" onclick="activity_feed_close()"><img src="http://design.vitalbmx.com/images/x_button.gif" /></a></span>
</div>
<div id="lightbox_content">
<p>Some text</p>
</div>
</div>
</div>
css
<style type="text/css">
div#lightbox_background {
display:none;
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
background: transparent url(http://design.vitalbmx.com/images/transp_30.png) repeat; z-index:1100;
}
div#lightbox_container {
background: #f6f6f6 url(http://design.vitalbmx.com/images/lb_container_bg.gif) right top repeat-y;
margin:16px 32px;
}
div#lightbox_container div#lightbox_header {
padding:5px 5px 0; text-align:right;
}
div#lightbox_container div#lightbox_content {
width:100%;
min-height:500px;
}
</style>
Fancybox делает это. Если он уже делает то, что вам нужно - используйте его. Если нет, проверьте исходный текст и посмотрите, как он это делает.