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 相关文章推荐
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
bootstrap-table组合表头的实现方法
Sep 07 Javascript
vue-cli扩展多模块打包的示例代码
Apr 09 Javascript
vue实现简单loading进度条
Jun 06 Javascript
vue-router源码之history类的浅析
May 21 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 Javascript
Vue实现简单的留言板
Oct 23 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+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
JQuery toggle使用分析
2009/11/16 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
jquery操作对象数组元素方法详解
2014/11/26 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
go和python调用其它程序并得到程序输出
2014/02/10 Python
python使用win32com库播放mp3文件的方法
2015/05/30 Python
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
Python正则捕获操作示例
2017/08/19 Python
Python中实现switch功能实例解析
2018/01/11 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
骆驼官方商城:CAMEL
2016/11/22 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
团支书的期末学习总结自我评价
2013/11/01 职场文书
工作疏忽检讨书
2014/01/25 职场文书
遥感技术与仪器求职信
2014/02/22 职场文书
市场营销调查计划书
2014/05/02 职场文书
个人自查自纠材料
2014/10/14 职场文书
Android 中的类文件和类加载器详情
2022/06/05 Java/Android