0

我正在使用检查元素选项构建我的网站，以像萤火虫一样分别检查每个元素。我喜欢构建像较新版本的 Firefox 这样的样式，它将模糊除选定元素之外的所有元素。关于如何做到这一点的任何想法？下面给出了所需输出的示例。

编辑：请注意，这里我需要选择的元素可能比其他元素具有更低的 DOM 层次结构。例如。我可能需要将 body 容器变灰，如果我选择了一些不应该具有灰色效果的内部元素。

在此处输入图像描述

4

3 回答 3

1

放置一个背景颜色为黑色、100% 宽度/高度、绝对定位和左侧/顶部为 0 以及不透明度介于 0 和 1 之间（例如 0.5）的 div。这给了你“灰色页面效果”。

然后，将您不想变灰的文本放在 DOM 层次结构中更高的单独 div 中（或在同一级别但具有更高的 z-index），这样它就不会被您的变灰覆盖-out div。

于 2012-07-12T18:39:22.717 回答
1

像这样的东西：

http://jsfiddle.net/lollero/T7PyK/

单击任何元素将显示覆盖并隔离该元素。单击覆盖将撤消该操作。

JS：

$('*').on("click", function( e ) {

    e.stopPropagation();

    var self = $(this),
        overlay = $('#overlay');

    if ( !self.hasClass('active') ) {

        if ( self.is(':not(#overlay)') ) {
            self.addClass('active');
        }
        overlay.fadeTo(400, 0.7);

    }
    if ( self.hasClass('active') ) {

        overlay.on("click", function() {
            overlay.fadeOut(400, function() {
                self.removeClass('active');
                });
        });

    }

});
​

CSS：

#overlay {
    display: none;
    background: #000;
    position: fixed;
    z-index: 100;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

.active {
    position: relative !important;
    z-index: 101 !important;
    background: #fff;
    box-shadow: 0px 0px 50px #111;
}
​

HTML：

<div id="overlay"></div>
于 2012-07-13T11:45:14.960 回答
0

您可以使用 jQuery 叠加效果和一些 CSS ..

点击这个链接： http ://tympanus.net/codrops/2009/12/03/css-and-jquery-tutorial-overlay-with-slide-out-box/

于 2012-07-12T18:56:17.140 回答