制作Lightbox效果
制作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效果的更多相关文章
- Strip JS – 低侵入,响应式的 Lightbox 效果
Strip 是一个灯箱效果插件,显示的时候只会覆盖部分的页面,这使得侵扰程度较低,并留出了空间与页面上的大屏幕,同时给予小型移动设备上的经典灯箱体验.Strp JS 基于 jQuery 库实现,支持 ...
- 使用Unity3D自带动画系统制作下雨效果
之前看了以前版本的unity3d demo AngryBots ,觉得里面的下雨效果不错,刚好前段时间学习了,写出来跟大家分享下,直接开始. 使用自带动画系统制作下雨效果. 先制作下雨的雨滴涟漪 步骤 ...
- PS快速制作下雪效果
PS快速制作下雪效果 具体的制作步骤如下: 1.打开PS,打开素材,打开窗口-动作 2.创建新动作,参数如下图 3.回到图层,建立一个图层,填充黑色,如下图 4.滤镜-像素化-点状化,参数如下图 5. ...
- jQuery Lightbox效果插件Boxer
演示:http://www.jq22.com/yanshi1139 下载:链接: https://pan.baidu.com/s/1o8zaV2q 密码: 2ccy Boxer 是一款基于 jQuer ...
- Unity3d中使用自带动画系统制作下雨效果(一)
之前看了以前版本的unity3d demo AngryBots ,觉得里面的下雨效果不错,刚好前段时间学习了,写出来跟大家分享下,直接开始. 使用自带动画系统制作下雨效果. 先制作下雨的雨滴涟漪. 步 ...
- WPF中制作立体效果的文字或LOGO图形(续)
原文:WPF中制作立体效果的文字或LOGO图形(续) 上篇"WPF中制作立体效果的文字或LOGO图形"(http://blog.csdn.net/johnsuna/archive/ ...
- WPF中制作立体效果的文字或LOGO图形
原文:WPF中制作立体效果的文字或LOGO图形 较久之前,我曾写过一篇:"WPF绘制党徽(立体效果,Cool) "的博文.有感兴趣的朋友来EMAIL问是怎么制作的?本文解决此类问题 ...
- 利用CSS制作图形效果
前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧 以下所有内容只使用一个HTML元素.任何类型 ...
- jquery.eraser制作擦涂效果
jquery.eraser制作擦涂效果 <pre><!DOCTYPE html><html> <head> <meta http-equiv=&q ...
随机推荐
- selenium IDE 安装环境配置
- postgreSQL执行计划
" class="wiz-editor-body wiz-readonly" contenteditable="false"> explain命 ...
- 软件-平面设计-CorelDRAW:CorelDRAW
ylbtech-软件-平面设计-CorelDRAW:CorelDRAW CorelDRAW Graphics Suite是加拿大Corel公司的平面设计软件:该软件是Corel公司出品的矢量图形制作工 ...
- Nginx网络架构实战学习笔记(一):Nginx简介、安装、信号控制、nginx虚拟主机配置、日志管理、location 语法、Rewrite语法详解
文章目录 nginx简介 nginx安装 nginx信号控制 nginx虚拟主机配置 日志管理 location 语法 精准匹配的一般匹配 正则匹配 总结 Rewrite语法详解 nginx简介 Ng ...
- s-cms学校建站重装漏洞
文件位置 ./install/index.php 影响版本 PHP V5.0 过程 通过获取GET请求判断是安装还是结束安装 安装步骤1 安装步骤2 安装步骤3 安装步骤4 解释 安装步骤1-3都没有 ...
- Jenkins 搭建篇
1.Jenkins 介绍 自动化运维工具:saltstack.jenkins.等.因为他们的目标一样,为了我们的软件.构建.测试.发布更加的敏捷.频繁.可靠 如果运维对git不熟,是无法做自动化部署. ...
- Jmeter+ InfluxDB+Grafana安装配置
前置条件: 系统:windows jmeter:5.1 InfluxDB安装 下载InfluxDB-v1.7.9和Chronograf-v1.7.14(InfluxDB的可视化web端). 下载完成之 ...
- awk 按小时 统计接口调用次数
#统计所有接口总量awk -F ' ' '{a[$7]++} END{for(i in a){print i,a[i] | "sort -r -k 7"}}' accesslog/ ...
- 构建局域网YUM仓库
修改yum源为阿里云源 检验阿里云源是否正常 yum repolist Loaded plugins: fastestmirror Loading mirror speeds from cached ...
- el-form-item内容过多,及弹窗框宽度属性show-overflow-tooltip设置
内容过多: :show-overflow-tooltip=true 宽度属性设置: .el-tooltip__popper{ max-width:30% }