lightbox使用_如何使用CSS和JavaScript创建Lightbox Ultra

lightbox使用

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: