Скажем, если у меня есть обертка div, которая содержит некоторые ссылки и изображения, есть ли способ отключить его сразу с помощью CSS?
После просмотра ответов:
Я отказался от идеи, которая может сделать это только с помощью CSS.
jQuery blockUI plug in работает как шарм.
если вы собираетесь использовать jQuery, вы можете легко выполнить это с помощью модуля blockUI.... или чтобы ответить на ваш вопрос с помощью CSS, вам придется полностью расположить div над содержимым, которое вы хотите заблокировать. просто убедитесь, что абсолютно позиционированный div появляется после того, как контент будет заблокирован для целей z-индексации.
<div style="position:relative;width: 200px;height: 200px;background-color:green">
<div>
<a href="#">Content to be blocked.</a>
</div>
<div style="position: absolute;top:0;left:0;width: 200px;height:200px;background-color: blue;z-index:2;opacity:0.4;filter: alpha(opacity = 50)"></div>
</div>
извините за все встроенные css. вам нужно будет сделать несколько хороших классов. Кроме того, это было проверено только в firefox и IE7.
Для этого существует правило CSS, но оно широко не используется из-за поддержки старых браузеров.
pointer-events: none;
В эти дни вы можете просто позиционировать псевдоэлемент над контентом.
.blocked
{
position:relative;
}
.blocked:after
{
content: '';
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
z-index:1;
background: transparent;
}
Скройте его другим элементом, который нельзя кликнуть. Возможно, вам придется использовать JavaScript для включения и отключения этой "обложки". Вы можете сделать что-то умное, как сделать его полупрозрачным или что-то еще.
<style>
#cover {position:absolute;background-color:#000;opacity:0.4;}
</style>
<div id="clickable-stuff">
...
</div>
<div id="cover">
</div>
<script type="text/javascript">
function coverUp() {
var cover = document.getElementById('cover');
var areaToCover = document.getElementById('clickable-stuff');
cover.style.display = 'block';
cover.style.width = //get areaToCover width
cover.style.height = //get areaToCover height
cover.style.left = //get areaToCover absolute left position
cover.style.top = //get areaToCover absolute top position
}
/*
Check out jQuery or another library which makes
it quick and easy to get things like absolute position
of an element
*/
</script>
Вам следует рассмотреть возможность применения функции event.preventDefault для jQuery. Здесь вы можете найти пример:
http://api.jquery.com/event.preventDefault/
TL; DR-версия:
$("#element-to-block").click( function(event) {
event.preventDefault();
}
BAM!
Я думаю, что этот тоже работает:
CSS
pointer-events: none;
pointer-events: none;
filter: opacity(0.8);
это лучшие ноги для вас попробовать это..
Если вы имеете в виду unclickable, чтобы пользователи не могли копировать и вставлять его или сохранять данные как-то. Нет, это никогда не было возможным. Все те сайты, которые делают, звучат/выглядят так, будто у них есть какой-то способ блокировать экономию вещей, а не на самом деле, и какие меры, которые они внедряют, легко обрабатываются.