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 相关文章推荐
vs2003 js文件编码问题的解决方法
Mar 20 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
Javascript自定义事件详解
Jan 13 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
微信小程序实现自动定位功能
Oct 31 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
js实现复制粘贴的两种方法
Dec 04 Javascript
Javascript之datagrid查询详解
Sep 15 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
php中mysql模块部分功能的简单封装
2011/09/30 PHP
PHP5常用函数列表(分享)
2013/06/07 PHP
Destoon模板制作简明教程
2014/06/20 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
用Javascript实现UTF8编码转换成gb2312编码
2006/12/22 Javascript
JS 的应用开发初探(mootools)
2009/12/19 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
Python使用新浪微博API发送微博的例子
2014/04/10 Python
Python程序设计入门(2)变量类型简介
2014/06/16 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
门卫岗位安全职责
2013/12/13 职场文书
材料员岗位职责
2014/03/13 职场文书
初中国旗下的演讲稿
2014/08/28 职场文书
趣味运动会广播稿
2015/08/19 职场文书
详解Redis集群搭建的三种方式
2021/05/31 Redis
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
详解Vue slot插槽
2021/11/20 Vue.js