1

我有一个 HTML 页面。默认情况下#B设置为display: none当我单击时#button #B通过 jQuery 显示为覆盖样式。我还需要锁定所有元素，除了#B 

<div id="A">
    <!-- Some HTML elements -->
    <a id="button">Button</a>
    <div id="B">
        <!-- Some HTML elements -->
    </div>
</div>

你能给我一个jquery插件来做到这一点吗？

4

2 回答 2

4

在大多数浏览器（支持:target伪选择器的浏览器）中，您可以使用纯 CSS 执行此操作，给定以下（通用）HTML：

<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>

和 CSS：

#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;
}

JS 小提琴演示

当然，值得重申的是：这个内容在用户的机器上，因此你不能阻止他们与内容的交互（假设他们知道如何与内容交互，例如：右键单击 -> 检查元素 -> 在 web 检查器中右键单击 -> '删除节点'，或者简单地使用 JavaScript: document.body.removeChild(document.getElementById('lock'));)。上面的这种方法只呈现一种限制的错觉，然后只对一个相对温顺/不感兴趣的用户。

于 2013-05-16T13:23:15.090 回答
1

大卫托马斯的回答很好，但如果你想要它的 jQuery 版本，看看这个小提琴。 另外，:targetIE9 之前的版本不支持。

HTML

<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>

CSS

#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 */
}

JAVASCRIPT

$(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
    });
}
于 2013-05-16T13:28:22.517 回答