首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JQuery弹出层示例可自定义

Posted in Javascript onMay 19, 2014

1、创建一个jsp页面，内容如下，js和css根据自己的实际情况而定 

<%@ page language="java" contentType="text/html; charset=UTF-8" 
pageEncoding="UTF-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> <link href="Share.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="../js/common/jquery-1.11.0.js"></script> 
<script type="text/javascript" src="popup.js"></script> 
<script type="text/javascript" src="testPopup.js"></script> 
</head> 
<body> 
<div id="right"> 
<div class="right_nav"> 
<h1>用户管理</h1> 
<a href="#" onclick="" class="but_tj">添加</a> 
</div> 
<div class="overlay" id="spm" style="display: none;"></div><!-- 将弹出层下面的页面变成不可操作状态，成半透明状态 --> 
<div class="Popup" style="display: none">,<!-- 隐藏div --> 
<div class="Popup_top"> 
<h1>添加</h1> 
<a href="#" class="Close"><img alt="关闭" src="close.png" /></a> 
</div> 
<div class="Popup_cen"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="BD_tab"> 
<tr> 
<td style="width: 110px;" align="right">姓名：</td> 
<td><input name="" id="name" type="text" class="input220" 
onfocus="this.className='input220L';this.onmouseout=''" 
onblur="this.className='input220';this.onmouseout=function(){this.className='input220'};" 
onmousemove="this.className='input220Lg'" 
onmouseout="this.className='input220'"> <font color="red">*</font></td> 
</tr> 
<tr> 
<td align="right">昵称：</td> 
<td><input name="" id="nickname" type="text" class="input220" 
onfocus="this.className='input220L';this.onmouseout=''" 
onblur="this.className='input220';this.onmouseout=function(){this.className='input220'};" 
onmousemove="this.className='input220Lg'" 
onmouseout="this.className='input220'"> <font color="red">*</font></td> 
</tr> 
<tr> 
<td style="width: 110px;" align="right">账号：</td> 
<td><input name="" id="account" type="text" class="input220" 
onfocus="this.className='input220L';this.onmouseout=''" 
onblur="this.className='input220';this.onmouseout=function(){this.className='input220'};" 
onmousemove="this.className='input220Lg'" 
onmouseout="this.className='input220'"> <font color="red">*</font></td> 
</tr> 
</table> 
</div> 
</div> 
</div> 
</body> 
</html>

2、公用的带有弹出层和关闭层的两个方法 
//popup layer 
function isIE(num){ 
var num = num || "", 
tester = document.createElement('div'); 
tester.innerHTML = '<!--[if IE ' + num + ']><i></i><![endif]-->'; 
return !!tester.getElementsByTagName('i')[0]; 
} 
function popupLayer(objClass,targetClass){ 
$("."+objClass).click(function(){ 
$("#spm").show(); 
var target=$("."+targetClass); 
var targetWidth=target.outerWidth(); 
var targetHeight=target.outerHeight(); 
if(isIE(6)){ 
$("#spm").hide(); 
//$("select").hide(); 
var top=$(document).scrollTop()+$(window).height()/2; 
target.css({"top":top+"px"}); 
$(window).scroll(function(){ 
var top=$(document).scrollTop()+$(window).height()/2; 
target.css({"top":top+"px"}); 
}); 
} 
target.css({"margin-top":-parseInt(targetHeight/2)+"px","margin-left":-parseInt(targetWidth/2)+"px"}); 
target.show(); 
return false; }); 
} 
//隐藏div的操作 
function closeLayer(objClass,targetClass) 
{ 
$("."+objClass).click(function(){ 
$(this).parents("."+targetClass).hide(); 
$("#spm").hide(); 
}); 
}

3、1中调用3中js实现效果的js代码 
$(function(){ 
//第一个参数是按钮的class属性值，第二个是被隐藏的div属性值 
popupLayer("but_tj","Popup"); 
closeLayer("Close","Popup"); 
}); //我们通过点击添加或修改按钮后使当前操作的div隐藏 
//closeAdd("Popup"); 
function closeAdd(targetClass){ 
$("."+targetClass).hide(); 
$("#spm").hide(); 
}

4、css样式 
html {min-height: 100%;position: relative;overflow: hidden;} 
body {background-color: #FFF;font: 12px 微软雅黑, Arial, sans-serif;margin: 0;} 
h1 {font-size: 12px;font-size: inherit;font-weight: normal;} 
a {text-decoration: none;} 
a:hover {text-decoration: none;} 
.clear {overflow: hidden;clear: both;} 
#right {margin-left: 190px;min-height: 100%;padding: 0;} 
.right_top {height: 40px;background-color: #f5f5f5;color: #666666;border-bottom: 1px solid #e5e5e5;line-height: 40px;padding-left: 50px;position: relative;z-index: 1;} 
.right_top a {color: #2b7dbc;} 
.right_nav {margin: 0 30px;height: 37px;background-color: #438eb9;line-height: 37px;position: relative;margin-top: 15px;} 
.right_nav h1 {font-size: 18px;color: #ffffff;padding-left: 20px;} 
.but_tj {width: 68px;height: 27px;display: block;position: absolute;top: 7px;right: 30px;background: url(but_JG.png) no-repeat;text-align: center;line-height: 27px;font-size: 14px;color: #FFF;} 
.but_tj:hover {background: url(but_JG1.png) no-repeat;} 
.pind20 {padding-left: 20px;} 
/*Popup*/ 
.Popup {width: 770px;height: 500px;position: absolute;left: 50%;top: 50%;margin-left: -400px;padding: 0 15px;margin-top: -250px;background-color: #FFF;border: 3px solid #006caa;z-index: 999;} 
.Popup_top {height: 40px;line-height: 40px;border-bottom: 1px solid #cccccc;} 
.Popup_top h1 {float: left;font-size: 14px;} 
.Close {float: right;font-family: Arial, Helvetica, sans-serif;margin-right: 10px;margin-top: 10px;} 
.Popup_cen {padding-top: 10px;width: 100%;height: 440px;overflow: auto;} 
.Popup_audit {padding-top: 10px;width: 100%;height: 440px;} 
.overlay {position: fixed;z-index: 990;width: 100%;height: 100%;top: 0;left: 0;filter: alpha(opacity = 60);opacity: 0.6;overflow: hidden;background-color: #000;} 
/*BD_tab*/ 
.BD_tab {width: 500px;margin: 0 auto;} 
.BD_tab td {padding-top: 12px;} 
.input220,.input220L,.input220Lg {width: 220px;height: 28px;border: 1px solid #d3d3d3;padding-left: 5px;line-height: 28px;font-family: "微软雅黑";color: #000;} 
.input220L {border: 1px solid #377bcb;background-color: #d5e8ff;} 
.input220Lg {border: 1px solid #7fb1eb;background-color: #d8e6f7;} 
.input220 {border: 1px solid #d3d3d3;}

效果如下图
JQuery弹出层示例可自定义

JQuery弹出层示例可自定义

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
ExtJS 简介 让你知道extjs是什么
Dec 29 Javascript
javascript学习笔记(二十) 获得和设置元素的特性（属性）
Jun 20 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
jQuery插件Validation快速完成表单验证的方式
Jul 28 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 Javascript
vue+Element-ui实现分页效果
Nov 15 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 #Javascript
js跨域访问示例(客户端/服务端)
May 19 #Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 #Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 #Javascript
jQuery filter函数使用方法
May 19 #Javascript
用js模拟struts2的多action调用示例
May 19 #Javascript
从零学JS之你需要了解的几本书
May 19 #Javascript
调幅(1) FM(4) LW(1) SWL(1) SW(1) 电路图(1) 短波(1) 电磁辐射(1) 发报机(1) 电台(1)
You might like
php cache类代码(php数据缓存类)
2010/04/15 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
zf框架的registry(注册表)使用示例
2014/03/13 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
Python 列表(List)操作方法详解
2014/03/11 Python
实例讲解Python中的私有属性
2014/08/21 Python
Python的设计模式编程入门指南
2015/04/02 Python
一张图带我们入门Python基础教程
2017/02/05 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
python多线程之事件Event的使用详解
2018/04/27 Python
python同时替换多个字符串方法示例
2019/09/17 Python
django修改models重建数据库的操作
2020/03/31 Python
django 实现简单的插入视频
2020/04/07 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
事业单位个人应聘自荐信
2013/09/21 职场文书
个人自我鉴定怎么写
2013/10/28 职场文书
文艺演出策划方案
2014/06/07 职场文书
商场促销活动策划方案
2014/08/18 职场文书
八年级英语教学计划
2015/01/23 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
2015年店长个人工作总结
2015/10/23 职场文书