Как сделать область без привязки к CSS?

Ответ 1

если вы собираетесь использовать 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.

Ответ 2

Для этого существует правило CSS, но оно широко не используется из-за поддержки старых браузеров.

pointer-events: none;

Ответ 3

В эти дни вы можете просто позиционировать псевдоэлемент над контентом.

.blocked
{
    position:relative;
}
.blocked:after
{
    content: '';
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index:1;
    background: transparent;
}

http://jsfiddle.net/HE5wR/27/

Ответ 4

Скройте его другим элементом, который нельзя кликнуть. Возможно, вам придется использовать 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>

Ответ 5

Вам следует рассмотреть возможность применения функции event.preventDefault для jQuery. Здесь вы можете найти пример:

http://api.jquery.com/event.preventDefault/

TL; DR-версия:

$("#element-to-block").click( function(event) {
  event.preventDefault();
}

BAM!

Ответ 6

Я думаю, что этот тоже работает:

CSS

pointer-events: none;

Ответ 7

pointer-events: none;
filter: opacity(0.8);

это лучшие ноги для вас попробовать это..

Ответ 8

Если вы имеете в виду unclickable, чтобы пользователи не могли копировать и вставлять его или сохранять данные как-то. Нет, это никогда не было возможным. Все те сайты, которые делают, звучат/выглядят так, будто у них есть какой-то способ блокировать экономию вещей, а не на самом деле, и какие меры, которые они внедряют, легко обрабатываются.