<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's width
cover.style.height = //get areaToCover's height
cover.style.left = //get areaToCover's absolute left position
cover.style.top = //get areaToCover's 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>
7条答案
按热度按时间4zcjmb1e1#
有一个CSS规则:
pointer-events: none;
查看浏览器支持:https://caniuse.com/pointer-events
5fjcxozz2#
现在你可以在内容上放置一个伪元素。
http://jsfiddle.net/HE5wR/27/
4smxwvx53#
我觉得这个也可以:
CSS
exdqitrt4#
如果你打算使用jQuery,你可以很容易地用blockUI插件来完成。.或者用CSS来回答你的问题,你必须把div绝对定位在你想阻止的内容上。只要确保绝对定位的div位于要阻止的内容之后,以用于z索引。
对不起,所有的内联CSS。你得好好上课了目前,该功能仅在Firefox和IE7上测试过。
iszxjhcz5#
用另一个不可点击的元素覆盖它。您可能需要使用JavaScript来打开和关闭此“封面”。你可以做一些聪明的事情,比如让它半透明或其他东西。
koaltpgm6#
你应该考虑应用jQuery的event.preventDefault函数。在这里你可以找到一个例子:
http://api.jquery.com/event.preventDefault/
TL; DR版本:
砰!
q3aa05257#
如果你的意思是不可点击,使用户无法复制和粘贴它或保存的数据以某种方式。不,这从来就不可能。
你可以使用jQuery BlockUI plugin或CSS规则
pointer-events: none;
,但这并不能真正阻止人们复制你的文本或图像。在最坏的情况下,我总是可以
wget
你的内容,在最好的情况下,css和js方法都很容易使用插件规避,比如:进一步说,除非你有一个真正好的和合法的借口破坏基本的浏览器行为,可用性,可访问性,翻译功能,密码管理器,截图工具,容器工具,或任何数量的各种浏览器插件功能在用户右键单击上下文菜单,请,只是,停止,这样做。