制作Lightbox效果

  • Lightbox是网页上常用的一种效果，比如单击网页上某个链接或图片，则整个网页会变暗，并在网页中间弹出一个层来。此时，用户只能在层上进行操作，不能在单击变暗的网页。

  • 程序代码

      <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    
  <%
    
  String path = request.getContextPath();
    
  String basePath = request.getScheme() + "://"
    
  	+ request.getServerName() + ":" + request.getServerPort()
    
  	+ path + "/";
    
  %>

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
  <html>
    
  <head>
    
  <style type="text/css">
    
  .black_overlay {
    
  display: none; /*    默认不显示 */
    
  position: absolute;
    
  top: 0;
    
  left: 0;
    
  width: 100%;
    
  height: 100%; /*  以上四条设置覆盖层和网页一样大，并且左上角对齐 */
    
  background-color: black; /*  背景为黑色 */
    
  z-index: 1001; /* 位于网页最上层 */
    
  -moz-opacity: 0.7; /*   Firefox浏览器透明度设置 */
    
  opacity: .70; /* 支持css3的浏览器透明度设置 */
    
  filter: alpha(opacity = 80); /*  IE浏览器透明度设置 */
    
  }

  .white_content {
    
  display: none;
    
  position: absolute;
    
  top: 30%;
    
  left: 30%;
    
  width: 40%;
    
  height: 40%; /* 以上四条设置弹出框位置和大小 */
    
  padding: 16px;
    
  border: 16px solid orange;
    
  background-color: white;
    
  z-index: 1002;
    
  overflow: auto; /* 当内容超出弹出框时，出现垂直滚动条 */
    
  }
    
  </style>
    
  <base href="<%=basePath%>">
    
  <title>My JSP 'index.jsp' starting page</title>
    
  <meta http-equiv="pragma" content="no-cache">
    
  <meta http-equiv="cache-control" content="no-cache">
    
  <meta http-equiv="expires" content="0">
    
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    
  <meta http-equiv="description" content="This is my page">
    
  <!--
    
  <link rel="stylesheet" type="text/css" href="styles.css">
    
  	-->
    
  </head>

  <body>
    
  <center>
    
  <br />
    
  <br />
    
  <br />

  <h3>Lightbox效果演示</h3>
    
  <br />
    
  <p>
    
  	<a href="JavaScript:void(0)"
    
  		onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
    
  		观看效果</a>
    
  </p>
    
  </center>
    
  <div id="light" class="white_content">
    
  这里是Lightbox弹窗的内容<br />
    
  <br />
    
   姓名：<input type="text" name="name" id="name" /><br />
    
   密码：<input type="text" name="pw" id="pw" />
    
  <br /> <br />
    
  	<a href="JavaScript:void(0)"
    
  	onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
    
  	关闭</a>
    
  </div>
    
  <div id="fade" class="black_overlay"></div>

  </body>
    
  </html>

  • 效果图：

制作Lightbox效果的更多相关文章

  1. Strip JS – 低侵入，响应式的 Lightbox 效果

    Strip  是一个灯箱效果插件,显示的时候只会覆盖部分的页面,这使得侵扰程度较低,并留出了空间与页面上的大屏幕,同时给予小型移动设备上的经典灯箱体验.Strp JS 基于 jQuery 库实现,支持 ...

  2. 使用Unity3D自带动画系统制作下雨效果

    之前看了以前版本的unity3d demo AngryBots ,觉得里面的下雨效果不错,刚好前段时间学习了,写出来跟大家分享下,直接开始. 使用自带动画系统制作下雨效果. 先制作下雨的雨滴涟漪 步骤 ...

  3. PS快速制作下雪效果

    PS快速制作下雪效果 具体的制作步骤如下: 1.打开PS,打开素材,打开窗口-动作 2.创建新动作,参数如下图 3.回到图层,建立一个图层,填充黑色,如下图 4.滤镜-像素化-点状化,参数如下图 5. ...

  4. jQuery Lightbox效果插件Boxer

    演示:http://www.jq22.com/yanshi1139 下载:链接: https://pan.baidu.com/s/1o8zaV2q 密码: 2ccy Boxer 是一款基于 jQuer ...

  5. Unity3d中使用自带动画系统制作下雨效果(一)

    之前看了以前版本的unity3d demo AngryBots ,觉得里面的下雨效果不错,刚好前段时间学习了,写出来跟大家分享下,直接开始. 使用自带动画系统制作下雨效果. 先制作下雨的雨滴涟漪. 步 ...

  6. WPF中制作立体效果的文字或LOGO图形(续)

    原文:WPF中制作立体效果的文字或LOGO图形(续) 上篇"WPF中制作立体效果的文字或LOGO图形"(http://blog.csdn.net/johnsuna/archive/ ...

  7. WPF中制作立体效果的文字或LOGO图形

    原文:WPF中制作立体效果的文字或LOGO图形 较久之前,我曾写过一篇:"WPF绘制党徽(立体效果,Cool) "的博文.有感兴趣的朋友来EMAIL问是怎么制作的?本文解决此类问题 ...

  8. 利用CSS制作图形效果

    前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧   以下所有内容只使用一个HTML元素.任何类型 ...

  9. jquery.eraser制作擦涂效果

    jquery.eraser制作擦涂效果 <pre><!DOCTYPE html><html> <head> <meta http-equiv=&q ...

随机推荐

  1. express上传图片

    var express = require('express') var app = express() var proxy = require('http-proxy-middleware') co ...

  2. 【从0到1，搭建Spring Boot+RESTful API+Shiro+Mybatis+SQLServer权限系统】03、创建RESTful API，并统一处理返回值

    本节应用Spring对RESTful的支持,使用了如@RestController等注解实现RESTful控制器. 如果对Spring中的RESTful不太明白,请查看相关书籍 1.创建一个数据对象, ...

  3. cooike和session到底是个啥

    1.为什么需要cookie ?  cookie不属于http协议范围,由于http协议无法保持状态,即无状态属性.但实际情况,我们却又需要“保持状态”,因此cookie就是在这样一个场景下诞生. co ...

  4. Nginx + Tomcat 配置负载均衡集群简单实例

    一.Hello world 1.前期环境准备 准备两个解压版tomcat,如何同时启动两个tomcat,请看我的另一篇文章<一台机器同时启动多个tomcat>. nginx官网下载解压版n ...

  5. Cent OS 7下安装 mongodb

    1.下载MongoDB 安装包 wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.6.8.tgz 2.解压并安装 .tgz 3. ...

  6. PouchContainer 容器技术演进助力阿里云原生升级

    点击下载<不一样的 双11 技术:阿里巴巴经济体云原生实践> 作者 | 杨育兵(沈陵) 阿里巴巴高级技术专家 我们从 2016 年开始在集团推广全面的镜像化容器化,今年是集团全面镜像化容器 ...

  7. MyEclipse增强代码补全

    MyElipse的默认代码提示功能隐藏了许多细节,需要开发者手动设置,一起来设置吧,让你的myeclpse更强大. 方法 1 打开MyEclipse 6.0.1,然后“window”→“Prefere ...

  8. 阻抗匹配 及 SI9000 使用

    1. 阻抗匹配 1. 波长 * 频率 = 光速(3*10^8) 2. PCB走线什么时候需要做阻抗匹配? 不主要看频率,而关键是看信号的边沿陡峭程度,即信号的上升/下降时间,一般认为如果信号的上升/下 ...

  9. Haproxy+Percona-XtraDB-Cluster 集群

    Haproxy介绍 Haproxy 是一款提供高可用性.负载均衡以及基于TCP(第四层)和HTTP(第七层)应用的代理软件,支持虚拟主机,它是免费.快速并且可靠的一种解决方案. HAProxy特别适用 ...

  10. docker内的应用访问宿主机上的mysql和Redis

    背景:宿主机部署MySQL.Redis,docker内部署tomcat.jdk 需求:tomcat内的应用访问宿主机的MySQL和Redis 方法:     一.连接地址切记不能用localhost和 ...