当前位置：文江博客话题详情

HTML jQuery Lightbox

新页面的灯箱弹出窗口

发布于 2024-12-20 02:25:43 字数 151 浏览 1 评论 0原文

我有一个名为 1.html 的 html 页面，

页面中有一个 2.html 的链接，

因此，当单击此链接时，它将弹出该页面（即 2.html）带有灯箱效果

谁能帮我做这个

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（2）

帅的被狗咬 2024-12-27 02:25:43

您可以使用任何流行的 JQuery 或支持 IFrame 的纯 JavaScript 灯箱来完成此操作。

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

回复收藏 0 原文

要走就滚别墨迹 2024-12-27 02:25:43

这里有一个非常好的教程。

试试这个：

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

There is(was) a very good tutorial here.

try this:

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

回复收藏 0 原文

~没有更多了~

关于作者

暂无简介

文章

评论

25 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

卷耳

文章 0 评论 0

佚名

文章 0 评论 0

℉服软

文章 0 评论 0

qq_2gSKZM

文章 0 评论 0

凉宸

文章 0 评论 0

gyhjy

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文