Question

我有一个名为 1.html

的html页面

页面中有 2.html 的链接

因此，点击此链接时，它会弹出带有灯箱效果的页面（即2.html）

任何人都可以帮我这么做吗

Answer 1

您可以使用任何支持IFrame的流行JQuery或纯JavaScript灯箱。

谷歌或在“外部网页”下试用：http://jacklmoore.com/colorbox/example1/

Answer 2

有一个非常好的教程here。

试试这个：

使用Javascript：

$(document).ready(function(){
    // add a click event
    $(".test").click(function(){
        overlayLink = $(this).attr("href");
        window.startOverlay(overlayLink);
        return false;
    });
});
function startOverlay(overlayLink) {
    //add the elements to the dom
    $("body")
    .append('<div class="overlay"></div><div class="container"></div>')
    .css({"overflow-y":"hidden"});
    //animate the semitransparant layer
    $(".overlay").animate({"opacity":"0.6"}, 400, "linear");
    //add the lightbox image to the DOM
    $(".container").html('<img src="'+overlayLink+'" alt="" />');
    //position it correctly after downloading
    $(".container img").load(function() {
                                        var imgWidth = $(".container img").width();
                                        var imgHeight = $(".container img").height();
                                        $(".container").css({"top": "50%","left": "50%"
                                }).animate({"opacity":"1"}, 400, "linear");
    // you need to initiate the removeoverlay function here, otherwise it will not execute.
    window.removeOverlay();
    });
}


function removeOverlay() {
    // allow users to be able to close the lightbox
    $(".overlay").click(function(){
        $(".container, .overlay").animate({"opacity":"0"}, 200, "linear", function(){
        $(".container, .overlay").remove();
        });
    });
}

HTML：

<body>
<a href="http://webmasterformat.com/sites/default/files/jquery-logo.png" class="test">button</a>
</body>

的CSS：

* {margin:0;border:0;padding:0}
body {height:100%;}
.overlay {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:#000;
opacity:0;
filter:alpha(opacity=0);
z-index:50;
/*cursor:pointer;*/
}
.container {
position:absolute;
opacity:0;
filter:alpha(opacity=0);
left:-9999em;
z-index:51;
width:200px;
height:200px;
margin-top: -100px;
margin-left: -100px;
background-color:white;
}

用于新页面的灯箱弹出窗口

2 个答案: