制作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. python实现人民币大写转换

    问题描述: 银行在打印票据的时候,常常需要将阿拉伯数字表示的人民币金额转换为大写表示,现在请你来完成这样一个程序. 在中文大写方式中,0到10以及100.1000.10000被依次表示为: 零 壹 贰 ...

  2. Redis入门很简单之五【Jedis和Spring的整合】

    Redis入门很简单之五[Jedis和Spring的整合] 博客分类: NoSQL/Redis/MongoDB redisnosql缓存jedisspring  在上一篇文章中,简单介绍了Jedis的 ...

  3. 67、saleforce的object的describe方法使用

    使用Schema类的describesSObjects方法获取描述sObject结果.使用此方法可以通过sObject类型名称描述一个或者多个sObject描述信息. //sObject types ...

  4. 64、通过PickListValuesUtil,Schema查看下拉列表中的值

    public class PickListValuesUtil { public static Map<String,Object> getPicklistValues(String sO ...

  5. 关于audio不能拖放

    图一,图二均为wav格式文件 图一为播放本地的音频,可以拖放 图二为放在后台的音频,不可以拖放 把这两个图片发给后台,让后台分析下两个的headers不同之处

  6. .net报错大全

    1.未能加载文件或程序集“Newtonsoft.Json, Version=4.5.0.0"[已解决] 解决方案:https://blog.csdn.net/mzl87/article/de ...

  7. jupyter notebook的魔法命令 % %%

    Magic单元分为两种,一种是line magics,另外一种cell magics. Line magic是通过在前面加%,表示magic只在本行有效. Cell magic是通过在前面加%%,表示 ...

  8. Leetcode代码复盘_动态规划

    动态规划中包含3个重要的概念: 1.最优子结构 2.边界 3.状态转移公式 以跳台阶为例,最优子结构为f(10)=f(9) + f(8),边界是f(1)=1, f(2)=2,状态转移公式f(n)=f( ...

  9. JWT工具类

    package com.ynhrm.common.utils; import io.jsonwebtoken.Claims;import io.jsonwebtoken.JwtBuilder;impo ...

  10. java中接口的简单运用&java中的一些异常(运用myeclipse)

    package test;//创建一个名为test的包 public class A4paper implements Paper { public String getSize(){ return& ...