使用jQuery锁定屏幕或元素

我有一个HTML页面。默认情况下，

#B

设置为

显示：无

，当我点击

#按钮时

#B

通过jQuery显示为覆盖样式。我还需要锁定除

#B

按钮

---

你能给我一个jquery插件来实现这一点吗？

在大多数浏览器（支持

：target

伪选择器的浏览器）中，你可以使用纯CSS实现这一点，前提是以下（通用）HTML：

---

当然，值得重申一点：此内容在用户的机器上，因此您无法阻止他们与内容交互（假设他们知道如何与内容交互，例如：右键单击->检查元素->在web检查器中右键单击->删除节点，或者简单地使用JavaScript:

document.body.removeChild（document.getElementById（'lock'）；

）。上述方法只会给人一种限制的错觉，然后只会给相对温顺/不感兴趣的用户。

在大多数浏览器（支持

：target

伪选择器的浏览器）中，您可以使用纯CSS实现这一点，前提是以下（通用）HTML：

---

当然，值得重申一点：此内容在用户的机器上，因此您无法阻止他们与内容交互（假设他们知道如何与内容交互，例如：右键单击->检查元素->在web检查器中右键单击->删除节点，或者简单地使用JavaScript:

document.body.removeChild（document.getElementById（'lock'）；

）。这种方法，如上所述，只会给人一种限制的错觉，然后只会给相对温顺/无私的用户。

David Thomas的答案很好，但如果你想要jQuery版本的，请看 此外，早于IE9的版本不支持

：target

HTML JAVASCRIPT

---

David Thomas的答案很好，但是如果您想要jQuery版本，请查看 此外，早于IE9的版本不支持

：target

HTML JAVASCRIPT

---

如果说锁定，你的意思是“不能与它后面的任何东西交互”，一个诀窍是在下面放置一个层，它占据了整个页面。这样，当用户尝试单击其他地方时，该层会接受所有的单击，但什么也不会发生。这是所有灯箱的基本原理。@Matt，是的，我尝试过，但似乎只面向消息，可能是我错了。@vyx.ca是的，我的意思是不能与任何东西交互在它后面加一层。我怎么能在下面加一层呢？我会帮你弄点东西。给我几分钟。如果说锁定，你的意思是“不能与它后面的任何东西交互”，一个诀窍是在下面放置一个层，它占据了整个页面。这样，当用户尝试单击其他地方时，该层会接受所有的单击，但什么也不会发生。这是所有灯箱的基本原理。@Matt，是的，我尝试过，但似乎只面向消息，可能是我错了。@vyx.ca是的，我的意思是不能与任何东西交互g其他人在它后面。我怎么能在下面放一层呢？我会为你做一些东西。给我几分钟。我不知道。谢谢分享！：）我不知道。谢谢分享！：）你的HTML缩进不正确，也没有显示。我已经为您更正了：）使用CSS处理覆盖层是个好主意，并且只对

单击
事件使用jQuery。@Mojtaba我听说Internet Explorer 8和早期版本不支持
：target
属性。所以用jQuery处理覆盖似乎更好。@Overflow012是的，你是对的。但是这个答案没有使用
：target
。我想说的是，本例中的JS代码可以以更好的方式编写，以正确的方式包含JavaScript和CSS。但是这个解决方案真的很完美。你的HTML没有正确缩进，也没有显示。我已经为您更正了：）使用CSS处理覆盖层是个好主意，并且只对
单击
事件使用jQuery。@Mojtaba我听说Internet Explorer 8和早期版本不支持
：target
属性。所以用jQuery处理覆盖似乎更好。@Overflow012是的，你是对的。但是这个答案没有使用
：target
。我想说的是，本例中的JS代码可以以更好的方式编写，以正确的方式包含JavaScript和CSS。然而，这个解决方案真的很完美。
<div id="A">
    <!-- Some HTML elements -->
    <a id="button">Button</a>
    <div id="B">
        <!-- Some HTML elements -->
    </div>
</div>

<div id="lock">
    <a href="#unlocked">Unlock</a>
</div>
<div id="unlocked" class="pageContent">
    <a href="#lock">Lock page</a>
    <p>This is the container element for page-content</p>
</div>

#lock {
    display: none;
}
#lock:target {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.5);
    border: 10em solid rgba(0,0,0,0.6);
    text-align: center;
}

<div id="A">
    <!-- Some HTML elements -->
    <a id="button" href="#">Button</a>
    <div id="B">
        <div id="background"></div>
        <div id="content">
            <p>This is a paragraph</p>
            <img src="http://fakeimg.pl/350x200/?text=This is an image" width="350" height="200" />
        </div>
    </div>
</div>

#A {}

#B, #background  {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:10;
}

#B  {
    display:none; 
}

#background  {
    background:#FFF;
    opacity:0.3;
}

#content {
    position:absolute;
    z-index:20;
    top:0; /* will be centered by jQuery */
    left:0; /* will be centered by jQuery */
}

$(document).ready(function() { 
    $('#button').click(function() {
        showOverlay();
    });

     //if you want to close the overlay if the user clicks the background
    $('#background').click(function() {
        $('#B').hide();
    }) 
});

function showOverlay() {
    $('#B').show();
    $('#content').css({
        top : ($(window).height() - $('#content').height()) / 2,
        left : ($(window).width() - $('#content').width()) / 2
    });
}