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 相关文章推荐
基于javascript 闭包基础分享
Jul 10 Javascript
jquery遍历checkbox介绍
Feb 21 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
JS实现瀑布流布局
Oct 21 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 29 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 If Else(elsefi) 语句
2013/04/07 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
[36:17]DOTA2上海特级锦标赛 - VGL音乐会全集
2016/03/06 DOTA
Python输入二维数组方法
2018/04/13 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
Python谱减法语音降噪实例
2019/12/18 Python
一套带答案的C++笔试题
2014/01/10 面试题
高中生毕业学习总结的自我评价
2013/11/14 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
工商局调档介绍信
2015/10/22 职场文书
班委竞选稿范文
2015/11/21 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
如何用python绘制雷达图
2021/04/24 Python
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python