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.ajax)
Nov 19 Javascript
JavaScript 拾碎[三] 使用className属性
Oct 16 Javascript
用jquery和json从后台获得数据集的代码
Nov 07 Javascript
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
node.js中的fs.stat方法使用说明
Dec 16 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
JavaScript中匿名函数的递归调用
Jan 22 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
基于vue 动态菜单 刷新空白问题的解决
Aug 06 Javascript
JavaScript实现雪花飘落效果
Dec 27 Javascript
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
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
PHP5函数小全(分享)
2013/06/06 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
jquery获取input的value问题说明
2010/08/19 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
JS中IP地址与整数相互转换的实现代码
2017/04/10 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
puppeteer库入门初探
2019/01/09 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
Python入门教程之if语句的用法
2015/05/14 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
基于python的Paxos算法实现
2019/07/03 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
护理实习自我鉴定
2013/12/14 职场文书
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
MySQL中的隐藏列的具体查看
2021/09/04 MySQL