Question

我是绝对的初学者，很抱歉提出愚蠢的问题。

要训练我正在尝试实施一个＆＃34;灯箱 - 画廊＆＃34;到我的画廊。

现在我正在处理叠加层。此代码用于混合叠加（它正在工作）：

$(document).ready(function() {
    $('.thumbnail').click(function() {
        $('#overlay').addClass("overlay").fadeIn("slow");

    })
});

此代码用于删除叠加层：

$(document).ready(function() {
    $('#overlay').live('click', function() {
        $('#overlay').removeClass('overlay');
    });
});

然而，它不起作用。任何人都可以给我一个暗示吗？

编辑：css：

.overlay {
background: black;
z-index: 10;    
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0.7;

}

Answer 1

我喜欢这个，因为代码很少：

$(document).ready(function (){
    $("#testButton").click(function() {$('#overlayContainer').show();});
});

<强> Demo

这样的技术很棒，因为它是纯CSS3！

*{margin:0;padding:0;}
#overlay{ /* we set all of the properties for are overlay */
    height:80%;
    width:80%;
    margin:0 auto;
    background:white;
    color:black;
    padding:10px;
    position:absolute;
    top:5%;
    left:10%;
    z-index:1000;
    display:none;
    /* CSS 3 */
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

#mask{ /* create are mask */
    position:fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,0.6);
    z-index:500;
    width:100%;
    height:100%;
    display:none;
}
/* use :target to look for a link to the overlay then we find are mask */
#overlay:target, #overlay:target + #mask{
    display:block;
    opacity:1;
}
.close{ /* to make a nice looking pure CSS3 close button */
    display:block;
    position:absolute;
    top:-20px;
    right:-20px;
    background:red;
    color:white;
    height:40px;
    width:40px;
    line-height:40px;
    font-size:35px;
    text-decoration:none;
    text-align:center;
    font-weight:bold;
    -webkit-border-radius:40px;
    -moz-border-radius:40px;
    -o-border-radius:40px;
    border-radius:40px;
}
#open-overlay{ /* open the overlay */
    padding:10px 5px;
    background:blue;
    color:white;
    text-decoration:none;
    display:inline-block;
    margin:20px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

Demo

但是如果你有一个半大的网站。我仍然建议只使用fancybox来预期多个实例。此外，还有iFrame的简单配置和其他许多选项。

$("#TheFancybox").html("<p>Just adding a paragraph to demonstrate that you can dynamically create HTML content within a DIV using .html()</p>");

Demo

尝试为库功能实现叠加

1 个答案: