如何使用CSS和JavaScript创建Lightbox Ultra

cukeoumuqian0413

于 2020-08-02 17:44:02 发布

阅读量150

点赞数

文章标签： css js html javascript web ViewUI

原文链接：https://www.script-tutorials.com/how-to-create-a-lightbox-ultra-using-css-and-javascript/

版权

How to Create a Lightbox Ultra Using CSS and JavaScript Lightbox css. The creation of CSS animation has brought an amazing feature for the web designers and coders to tinker on to show their own creativity. With the advent of Lightbox, they have a better tool to use in creating their own images with 3D animation effects as well as background dimming capability that removes the distraction of viewing the image better. Combining Lightbox with CSS and JavaScript does offer web coders a valuable tool to enhance their techniques in creating great 3D animation with Lightbox using the following concepts to use in your own coding design projects

如何使用CSS和JavaScript灯箱CSS 创建灯箱Ultra 。 CSS动画的创建为Web设计师和编码人员提供了一个了不起的功能，他们可以不断发挥自己的创造力。随着Lightbox的出现，他们有了更好的工具来创建具有3D动画效果的自己的图像以及背景调光功能，从而更好地消除了观看图像的干扰。将Lightbox与CSS和JavaScript结合使用确实为Web编码人员提供了一种有价值的工具，可增强他们使用Lightbox使用以下概念在自己的编码设计项目中使用它们创建出色的3D动画的技术。

使用CSS和灯箱 (Using CSS and Lightbox)

You can creatively achieve this design using this coding technique with Lightbox and CSS from the ingenuity of Emanuele Feronato which is worth sharing to those who want to learn the basics on creating Lightbox effects with CSS. The Lightbox effect is pre-loaded and static and best for a beginner to learn.

您可以使用Emanuele Feronato的独创性，使用Lightbox和CSS的这种编码技术来创造性地实现此设计，这与那些想学习使用CSS创建Lightbox效果的基础知识的人值得分享。灯箱效果已预先加载且是静态的，最适合初学者学习。

The image above shows a black overlay that makes the web page appears to fade with 80% black opaque background. It is as wide as the entire browser. The white content on the other hand provides a layer where you want the Lightbox overlay to appear which can be a layer for your login screen or photo.

上图显示了一个黑色的覆盖层，使网页在80％黑色不透明背景下显得褪色。它与整个浏览器一样宽。另一方面，白色内容提供了一个要在其中显示灯箱叠加层的图层，该图层可以是您的登录屏幕或照片的图层。

To begin, you have to start using the CSS code below:

首先，您必须开始使用以下CSS代码：


.black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}
.white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
}


.black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}
.white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

Through the HTML file, you need put this code before the tag:

通过HTML文件，您需要将此代码放在标记之前：


<div id="light" class="white_content">This is lightbox object</div><div id="fade" class="black_overlay"></div>


<div id="light" class="white_content">This is lightbox object</div><div id="fade" class="black_overlay"></div>

Then insert this code on the part where you want the Lightbox to open:

然后将此代码插入您要打开灯箱的部分：


document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';


document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';

For instance, you will find a link like this:

例如，您会找到这样的链接：


<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';">Click it</a>


<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';">Click it</a>

Then in order to close the Lightbox, you should include the code like this:

然后，为了关闭灯箱，您应该包含以下代码：


<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none';">Hide it</a>


<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none';">Hide it</a>

Overall, you have to generate these codes as a result of integrating the codes above:

总体而言，由于集成了上述代码，因此您必须生成以下代码：


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>LIGHTBOX EXAMPLE</title>
        <style>
        .black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
        }
        .white_content {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 50%;
            padding: 16px;
            border: 16px solid orange;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }
    </style>
    </head>
    <body>
        <p>This is the main content. To display a lightbox click <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
        <div id="light" class="white_content">This is the lightbox content. <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
        <div id="fade" class="black_overlay"></div>
    </body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>LIGHTBOX EXAMPLE</title>
        <style>
        .black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
        }
        .white_content {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 50%;
            padding: 16px;
            border: 16px solid orange;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }
    </style>
    </head>
    <body>
        <p>This is the main content. To display a lightbox click <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
        <div id="light" class="white_content">This is the lightbox content. <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
        <div id="fade" class="black_overlay"></div>
    </body>
</html>

JavaScript上的灯箱 (Lightbox on JavaScript)

This Lightbox script will help you create a simple Lightbox overlay effect using this link:

此灯箱脚本将帮助您使用以下链接创建简单的灯箱叠加效果：


<a href="lightbox.jpg" class="lightbox">open lightbox!</a>


<a href="lightbox.jpg" class="lightbox">open lightbox!</a>

Then use this code:

然后使用以下代码：


$(".lightbox").click(function() {
    window.startOverlay();
});


$(".lightbox").click(function() {
    window.startOverlay();
});

To specify the link to be clicked, you need to work out in getting the href attribute and send it as a content parameter and use this code:

要指定要单击的链接，您需要弄清楚获取href属性并将其作为内容参数发送并使用以下代码：


$(".lightbox").click(function(){
    overlayLink = $(this).attr("href");
    window.startOverlay(overlayLink);
});


$(".lightbox").click(function(){
    overlayLink = $(this).attr("href");
    window.startOverlay(overlayLink);
});

We need to prepare a DOM in order to have two elements that will prevent the scrolling of the viewport so add the code below:

我们需要准备一个DOM，以使其具有两个元素来防止视口滚动，因此请添加以下代码：


function startOverlay(overlayLink) {
    $("body").append('<div class="overlay"></div><div class="container"></div>').css({"overflow-y":"hidden"});
    .....
}


function startOverlay(overlayLink) {
    $("body").append('<div class="overlay"></div><div class="container"></div>').css({"overflow-y":"hidden"});
    .....
}

With the two elements needed already in place in the DOM, you need to add more CSS coding in order to add more style on these elements by using this code:

有了DOM中已经需要的两个元素，您需要添加更多CSS编码，以便通过使用以下代码在这些元素上添加更多样式：


.overlay {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:#000;
    opacity:0;
    filter:alpha(opacity=0);
    z-index:50;
}
.container {
    position:absolute;
    opacity:0;
    filter:alpha(opacity=0);
    left:-9999em;
    z-index:51;
}


.overlay {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:#000;
    opacity:0;
    filter:alpha(opacity=0);
    z-index:50;
}
.container {
    position:absolute;
    opacity:0;
    filter:alpha(opacity=0);
    left:-9999em;
    z-index:51;
}

To make the overlay visible, you need to use a fading effect using this code:

为了使覆盖可见，您需要使用以下代码使用淡入淡出效果：


function startOverlay(overlayLink) {
    .....
    $(".overlay").animate({"opacity":"0.6"}, 200, "linear");
    .....
}


function startOverlay(overlayLink) {
    .....
    $(".overlay").animate({"opacity":"0.6"}, 200, "linear");
    .....
}

In effect, the code will animate the opacity to the value of 0.6 within 200 milliseconds. This will also result in a linear transition. The next step is to load the content into the Lightbox. We will use an image that will be added to the DOM and the browser will actually download it automatically using this code.

实际上，该代码将在200毫秒内将不透明度动画化为0.6的值。这也将导致线性过渡。下一步是将内容加载到灯箱中。我们将使用将添加到DOM中的图像，并且浏览器实际上将使用此代码自动下载它。


function startOverlay(overlayLink) {
    .....
    $(".container").html('<img src="'+overlayLink+'" alt="" />');
    .....
}


function startOverlay(overlayLink) {
    .....
    $(".container").html('<img src="'+overlayLink+'" alt="" />');
    .....
}

Then you have to actually display the image and make the adjustments on its width and height. Then position the Lightbox in the middle of screen and fade it in using this code:

然后，您必须实际显示图像并对其宽度和高度进行调整。然后将灯箱放置在屏幕中间，并使用以下代码淡入：


function startOverlay(overlayLink) {
    .....
    $(".container img").load(function() {
        var imgWidth = $(".container img").width();
        var imgHeight = $(".container img").height();
        $(".container")
            .css({
                "top":        "50%",
                "left:        "50%",
                "width":      imgWidth,
                "height":     imgHeight,
                "margin-top": -(imgHeight/2), // the middle position
                "margin-left":-(imgWidth/2)
            })
            .animate({"opacity":"1"}, 200, "linear");
    });
}


function startOverlay(overlayLink) {
    .....
    $(".container img").load(function() {
        var imgWidth = $(".container img").width();
        var imgHeight = $(".container img").height();
        $(".container")
            .css({
                "top":        "50%",
                "left:        "50%",
                "width":      imgWidth,
                "height":     imgHeight,
                "margin-top": -(imgHeight/2), // the middle position
                "margin-left":-(imgWidth/2)
            })
            .animate({"opacity":"1"}, 200, "linear");
    });
}

Once the image is loaded successfully, the load function will then execute. While you are almost done, don’t forget to add this code to make sure the browser will not also load the link itself:

成功加载映像后，将执行加载功能。当您快完成时，请不要忘记添加以下代码，以确保浏览器不会同时加载链接本身：


$(".lightbox").click(function() {
    window.startOverlay();
    return false;
});


$(".lightbox").click(function() {
    window.startOverlay();
    return false;
});

As the last step, to enable the user of to close the Lightbox, you need add this code:

最后，要使的用户能够关闭灯箱，您需要添加以下代码：


$(".overlay").click(function(){
    $(".container, .overlay")
    .animate({"opacity":"0"}, 200, linear, function(){
        $(".container, .overlay").remove();
    })
});


$(".overlay").click(function(){
    $(".container, .overlay")
    .animate({"opacity":"0"}, 200, linear, function(){
        $(".container, .overlay").remove();
    })
});

To give the user a visual clue that they can click it, you need to tweak the CSS by adding the cursor:pointer; to the element of .overlay and then you are finally done. You can create an image overlay like this:

为了向用户提供可以单击的视觉提示，您需要通过添加cursor：pointer;来调整CSS。到.overlay元素，然后您终于完成了。您可以像这样创建图像叠加层：

翻译自: https://www.script-tutorials.com/how-to-create-a-lightbox-ultra-using-css-and-javascript/

cukeoumuqian0413

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何使用CSS和JavaScript创建Lightbox Ultra

How to Create a Lightbox Ultra Using CSS and JavaScript Lightbox css. The creation of CSS animation has brought an amazing feature for the web designers and coders to tinker on to show their own crea...
复制链接

扫一扫