jquery弹出框的用法示例(一)


Posted in Javascript onAugust 26, 2013

最近做一个项目,许多功能都是关于弹出框的,以前觉得弹出框就那一种,很容易实现,但是最近真的做起这个功能了,发现会有好多自己考虑不到的问题。
比如关于一些添加,删除,修改的弹出框,当添加一些用户的时候,弹出框里要提交一些关于用户的信息,设置密码等信息,当修改的时候,根据用户的名字和id号来修改密码等等。

例子如下:

<ul class="tabPanel clearfix"> 
<li class="hover"> 
<a href="" class="close"></a> 
<div class="panelBox"> 
<dl> 
<dt id="dt1" contentid=".pwdTips">蓝枫前端</dt> 
<dd>添加询盘【<a href="">10</a>】</dd> 
<dd>跟踪询盘【<a href="">1000</a>】</dd> 
</dl> 
</div> 
</li> 
<li> 
<a href="" class="close"></a> 
<div class="panelBox"> 
<dl> 
<dt id="dt2" contentid=".pwdTips">蓝枫前端</dt> 
<dd>添加询盘【<a href="">10</a>】</dd> 
<dd>跟踪询盘【<a href="">1000</a>】</dd> 
</dl> 
</div> 
</li> 
<li> 
<a href="" class="close"></a> 
<div class="panelBox"> 
<dl> 
<dt id="dt3" contentid=".pwdTips">蓝枫前端</dt> 
<dd>添加询盘【<a href="">10</a>】</dd> 
<dd>跟踪询盘【<a href="">1000</a>】</dd> 
</dl> 
</div> 
</li> 
<li> 
<a href="" class="close"></a> 
<div class="panelBox"> 
<dl> 
<dt contentid=".pwdTips">蓝枫前端</dt> 
<dd>添加询盘【<a href="">10</a>】</dd> 
<dd>跟踪询盘【<a href="">1000</a>】</dd> 
</dl> 
</div> 
</li> 
<li> 
<a href="" class="close"></a> 
<div class="panelBox"> 
<dl> 
<dt id="" contentid=".pwdTips">蓝枫前端</dt> 
<dd>添加询盘【<a href="">10</a>】</dd> 
<dd>跟踪询盘【<a href="">1000</a>】</dd> 
</dl> 
</div> 
</li> 
<li> 
<div class="panelBox addpanelBox"> 
<a class="addPanelBtn" contentid="div#pwdRest">添加</a> 
</div> 
</li> 
</ul>

弹出框内容:
<div class="pwdTips" style="display:none;" id="pwdRest"> 
<a class="closeBtn" href="javascript:;"></a> 
<div class="traDBox"> 
<div class="row" id="userName"> 
<div class="label" >用 户 名:</div> 
<div class="cell"><input type="text" class="text" id="name" name="" value=""></div> 
</div> 
<div class="row"> 
<div class="label" >营销客服:</div> 
<div class="cell"><input type="text" class="text" id="opename" name="" value=""></div> 
<input type="hidden" name="" id="onLineId"/> 
</div> 
<div class="row"> 
<div class="label">登录密码:</div> 
<div class="cell"><input type="text" class="text" id="" name="" value=""></div> 
</div> 
<div class="row"> 
<div class="label">确认密码:</div> 
<div class="cell"><input type="text" class="text" id="" name="" value=""></div> 
</div> 
<div class="row"> 
<div class="dialogBtn"> 
<button type="submit" class="diaSmtBtn">确认</button> 
<button type="button" class="diaSmtRst">取消</button> 
</div> 
</div> 
</div> 
</div>

实现的弹出框的js
$(function(){ 
var $window = $(window), 
$doc = $(document), 
$body = $('body'); 
//关于管理员添加删除的js代码 
var tabLi=$(".tabPanel").find("li"); 
tabLi.hover(function(){ 
$(this).addClass("hover").siblings().removeClass("hover"); 
},function(){}) 
/*弹出框定位*/ 
$(window).scroll(function() { 
var pwdTips =$(".pwdTips"); 
var height=pwdTips.height(); 
var width=pwdTips.width(); 
var bodyHieght=$(window).height() ; 
var bodyWidth=$(window).width() ; if(!pwdTips.is(":hidden")){ 
pwdTips.css({ 
position: "fixed", 
top: (bodyHieght-height)/2, 
left:(bodyWidth-width)/2 
}); 
} 
}); 
/*弹出框定位结束*/ 
/*弹出框半透明背景的设置*/ 
var bgShadow = function(zindex) { 
zindex = zindex?zindex:999; 
var _bg = $('div.pwdTipsBg'), 
bg_html = '<div class="pwdTipsBg"></div>'; 
if(_bg.length === 0) { 
_bg = $(bg_html); 
} 
$body.append(_bg); 
_bg.css({ 
position : 'absolute', 
top : '0px', 
left : '0px', 
width : $window.scrollLeft()+$window.width()+'px', 
height : $doc.height(), 
'z-index' : zindex 
}); 
return _bg; 
}; 
/*弹出框半透明背景的设置*/ 
/*绑定事件*/ 
var bindClick = function(obj,handlerEvent){ 
obj.bind("click",function(e){ 
e.preventDefault(); 
bgShadow(1001); 
var select=$(this).attr('contentid'); 
var onLineId=$(this).attr('id'); 
var pwdTips=$(select); 
if(handlerEvent!=null) 
{ 
handlerEvent($(this)); 
} 
pwdTips.show(); 
pwdTips.find(".closeBtn,.diaSmtRst").click(function(){ 
pwdTips.hide(); 
var _bg = $('div.pwdTipsBg'); 
_bg.remove(); 
}); 
pwdTips.find('#onLineId').val(onLineId); 

}); 
}; 
var show=tabLi.find("dt"), 
addPanelBtn=$(".addPanelBtn"), 
clickBtn=$(".clickBtn"); 
var setValue= function(obj){ 
if($(obj).is('.addPanelBtn')) 
{ 
$('#opename').attr('value',""); 
$('#pwdRest').find('#userName').show(); 
} 
else 
{ 
$('#pwdRest').find('#userName').hide(); 
$('#opename').attr('value',obj.text()); 
$("input.shareId").attr('value',obj.attr('id')) 
} 
} 
$(function(){ 
bindClick(show,setValue); 
bindClick(addPanelBtn,setValue); 
bindClick(clickBtn,setValue); 
}); 
})

所有的弹出内容根据情况做判断显示,获取相应的值,先根据触发的类型判断是修改密码或者添加用户客服,然后再显示相应的弹出内容
Javascript 相关文章推荐
JQuery 表单中textarea字数限制实现代码
Dec 07 Javascript
jQuery实现菜单式图片滑动切换
Mar 14 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 Javascript
javascript每日必学之继承
Feb 23 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
May 29 Javascript
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
在vue中封装可复用的组件方法
Mar 01 Javascript
浅谈在node.js进入文件目录的问题
May 13 Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 #Javascript
使用js实现雪花飘落效果
Aug 26 #Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 #Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 #Javascript
jquery cookie实现的简单换肤功能适合小网站
Aug 25 #Javascript
javascript jq 弹出层实例
Aug 25 #Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 #Javascript
You might like
桌面中心(三)修改数据库
2006/10/09 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
bootstrap 设置checkbox部分选中效果
2017/04/20 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
python的re模块使用方法详解
2019/07/26 Python
Python 使用多属性来进行排序
2019/09/01 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
简单了解Django项目应用创建过程
2020/07/06 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
阿迪达斯芬兰官方网站:adidas芬兰
2017/01/30 全球购物
性能服装:HYLETE
2018/08/14 全球购物
工程专业求职自荐书范文
2014/02/08 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
治庸问责心得体会
2014/09/12 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
努力学习保证书
2015/02/26 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏
Python中re模块的元字符使用小结
2022/04/07 Python
win7配置本地ftp服务器的图文教程
2022/08/05 Servers