制作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>效果图：
转载于:https://www.cnblogs.com/renxiuxing/p/9134341.html
制作Lightbox效果相关推荐
- ps怎么制作流体_ps相框制作教程：ps怎么制作相框效果
今天分享ps相框制作教程:ps怎么制作相框效果,平常看到很多人在秀朋友圈时候,能把照片填充一个相框,让照片瞬间高大上,ps相框制作教程:ps怎么制作相框效果给大家安排上,作为我的粉丝不用羡慕其他人 ...
- 使用jQuery制作手风琴效果.(转)
http://www.cssrain.cn/article.asp?id=1369 使用jQuery制作手风琴效果 本例主要讲解如何利用jQuery创建一个简单的手风琴风格的竖向菜单,从易到难. 第一 ...
- 滤镜应用——制作彩虹效果
滤镜应用--制作彩虹效果 原图: 效果图: 步骤: 1.打开素材图片,新建图层1,选择"矩形选框工具",在图层1上圈出一个矩形选区,选择"渐变工具",选择色谱线 ...
- java word转html 烟火,Java多线程制作烟花效果.doc
Java多线程制作烟花效果 Java多线程应用实例: 制作烟花效果 本例知识点一句话讲解新学知识使用Thread类管理线程已学知识Math类产生随机数使用Color类设置颜色使用Graphics类绘制 ...
- 40种Lightbox效果收集
在设计网站的时候,可能会有一些特效,而下面的40种特效,都是很不错的,既可以增加你的网站的特点,又可以带来一些回头客,下面的一些效果是包容了所有内容的Lightbox效果(比如MilkBox和Ligh ...
- gdiplus 水印_Delphi程序的应用GDI+制作水印效果图片
利用GDI+可以很方便的制作带水印效果的图片,网上介绍这方面的文章也很多,但鲜有Delphi的,本文参照网上文章http://www.codeproject.com/KB/GDI-plus/water ...
- PS制作立体效果——圆柱
制作立体效果--圆柱 效果图: 实心圆柱体 空心圆柱体 步骤: 1.新建一画布,添加背景色,单击"渐变"工具,选择线性渐变,打开渐变编辑器对话框,设置"黑-蓝&q ...
- 分享30个最佳 jQuery Lightbox 效果插件
您可能还喜欢 60款很酷的 jQuery 幻灯片演示和下载 Web开发者必备的20款超赞jQuery插件 提升你网站水平的 jQuery 插件推荐 12个很棒的学习 jQuery 的网站推荐 分享27 ...
- Unity3d中使用自带动画系统制作下雨效果(一)
之前看了以前版本的unity3d demo AngryBots ,觉得里面的下雨效果不错,刚好前段时间学习了,写出来跟大家分享下,直接开始. 使用自带动画系统制作下雨效果. 先制作下雨的雨滴涟漪. 步 ...
- WPF中制作立体效果的文字或LOGO图形
WPF中制作立体效果的文字或LOGO图形 原文:WPF中制作立体效果的文字或LOGO图形 较久之前,我曾写过一篇:"WPF绘制党徽(立体效果,Cool) "的博文.有感兴趣的朋友来 ...
最新文章
- android----HttpClient的get,post和图片上传服务器
- 支持向量机SVM原理（一）
- linux下mono的安装与卸载
- 数据科学中的简单线性回归
- 蔡先生论道大数据之六 ： 打破对“精准性”的执着
- PHP 7 的五大新特性
- python指定返回类型_如何在python中指定方法返回类型列表 - python
- 基于Python分析实现酒店评论的中文情感
- 微博视频号搬砖项目，单号月入1000+！
- FPGA中LUT初步学习
- Reflector 3 for Mac(ios屏幕镜像工具)
- 二十二、商城 - 商品录入-FastDFS（10）
- net.sf.ezmorph.bean.MorphDynaBean cannot be cast to
- Latex笔记-脚注
- 出现BOOTMGR is missing 最简单实用的解决方案
- 如何通过RSS来订阅天气预报
- INPUT输入框带默认值
- c:set -----------JSTL
- 医学图像中的atlas代表什么
- 犀牛插件开发-显示MFC对话框-Rhino插件