Непроницаемый элемент
Пытаюсь сделать блокиратор веб документа для принудительного логина по принципу лайтрума. То есть, грузит пользователь сайт, но сверху транспарентно вешается, например div, который не пропускает никакие клики и прочие ивенты. Ловит их все на себя, запуская свой ивент вместо тех что под ним.
Может можно как-то сделать отключение всех ивентов в определённом элементе (body и всех что внутри него), а потом их включить без перечисления? но лучше реализовать непроницаемость. Нарыл disable, он для всякого рода чекбоксов и радиобатанов, но рядом. Как сделать? |
Цитата:
И чему нас учит этот Лайтрум? |
а обычный div c
position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 1000000; в body вам чем не угодил? |
ksa
Лайтрум затеняет весь документ, делая его либо трудно воспринимаемым либо совсем не читаемым. Поверх выводит окно с фотогрфией на которой и концентрируется всё внимание. zilker Через него проходят все клики, прокрутка страницы пользователем (колесом или тачустройством), но самое главное он не ловит на себе клики если под ним, например, кнопка или ссылка. Только в тех малых участках где под ним ничего нет он выдаёт свою реакцию на ивэнты. Можно и в body только это lock на документ. У меня на body посажен blur filter при такой блокировке (собственно, у меня не происходит затенение, а происходит размытие, но не в этом суть). Если div внутри него, то и он размывается. Можно конечно переиграть, но суть не меняется - div проницаем для кликов и свои дейсвия не выполняет. |
Да ладно, что серьёзно?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<style>
body {
height: 2500px;
}
#bg {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1000000;
background: #c1c1c1;
opacity: 0.5;
display: none;
}
#onclick {
width: 50px;
height: 50px;
background: #c1c1c1;
}
</style>
<body>
<wrapper>
<div id="onclick"></div>
<input type="button" value="Магия" id="magic">
</wrapper>
<div id="bg"></div>
</body>
<script>
$('#onclick').click(function(){ alert('It`s click.') });
$('#magic').click(function(){
$('#wrapper').css('width', $('#wrapper').css('width'));
$('body').css('overflow', 'hidden');
$('#bg').show();
})
</script>
|
Цитата:
Цитата:
Цитата:
как это у вас получилось? я бы сделал так <body> <div style="position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 1000000; background-color: rgba(100,0,0,0.5);"></div> |
Чтобы не прокручивалось нужно добавить:
html, body {
overflow:hidden;
}
|
так и не понял в чём именно собака порылась но добавив position top и left заработало как надо.
|
| Часовой пояс GMT +3, время: 07:47. |