制作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) "的博文.有感兴趣的朋友来 ...
最新文章
- 2015-07-22 JQuery 第二课(JQ元素获取,添加,删除,判断,遍历,取值,样式设置,改变对象,切换)...
- how to add one row in the dataframe?
- [转载]通过Arcgis Server向MXD中添加图层
- asp.net MVC2 初探十一
- Android开发之使用观察者模式结合推送实现订单自动刷新
- 使用git管理github项目
- 南昌网络赛E Interesting Series
- ios企业应用发布流程
- linux操作系统中不能挂载nfts格式的文件系统,Linux 下无法挂载windows的ntfs文件系统...
- Android中关于Volley的使用(三)认识Volley的架构
- 7628刷breed_我的刷breed机方法 一步一图超详细
- 哈理工OJ 1029 Function Run Fun(记忆思想)
- Ubuntu 安装Maven步骤
- 探索新技术经验分享(六)logicaldoc二次开发探索
- 带你了解Hook技术
- 芝加哥大学校长:诺贝尔奖人才是怎样炼成的?
- Habor镜像仓库的使用
- js获取元素下的第一级子元素
- 什么是 Linux 发行版?为什么它被称为“发行版”
- 学习笔记之NumPy