首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 26, 2013

第二种情况是关于弹出框，没有关闭按钮，但是点击其他地方的时候，弹出框消失，这个还涉及到一些关于层次问题，必须用js给弹出框的父元素加上更高的层次，以免被下面的内容覆盖。 

<div class="listBox"> 
<div class="tit"> 
<h2>询盘分配</h2> 
<div class="listTit"> 
<ul> 
<li class="inquryCon">询盘详情</li> 
<li>联系人</li> 
<li>所在地</li> 
<li>来源</li> 
</ul> 
</div> 
</div> 
<div class="listTable"> 
<ul class="listInqury listInquNew"> 
<li> 
<div class="listInName"> 
<div class="listName"><a href="">电主轴,需要在45号钢上钻孔，需要电主轴带自给进功能，给进形成在电主轴,需要在45号钢上钻孔</a></div> 
</div> 
<div class="conTel">李经理</div> 
<div class="listInAdress">安徽宿州</div> 
<div class="orgin">在线客服</div> 
<a class="assigneeBtn clickBtn" href="" contentid=".pwdTips" id="1">分配到人</a> 
<div class="onLine">半小时前</div> 
<div class="clear"></div> 
<div class="winDiaBox"> <i></i> 
<div class="dialogInfor"> 
<div class="row"> 
<div class="label">日期：</div> 
<div class="cell">2013-7-25 14:54:54</div> 
</div> 
<div class="row"> 
<div class="label">来源：</div> 
<div class="cell">在线客服</div> 
</div> 
<div class="row"> 
<div class="label">客户所在地：</div> 
<div class="cell">上海闵行</div> 
</div> 
<div class="row"> 
<div class="label">联系人：</div> 
<div class="cell">上海闵行</div> 
</div> 
<div class="row"> 
<div class="label">联系方式：</div> 
<div class="cell">上海闵行</div> 
</div> 
<div class="row"> 
<div class="label">QQ：</div> 
<div class="cell">34455566666</div> 
</div> 
<div class="row"> 
<div class="label">询盘详情：</div> 
<div class="cell">想要个3*1300的剪板机，能裁3个的不锈钢板 1300的就行。有现货吗?不含税最低多钱?（烟台）</div> 
</div> 
<div class="row"> 
<div class="label">营销客服：</div> 
<div class="cell">上海闵行</div> 
</div> 
</div> 
</div> 
</li> 
<li> 
<div class="listInName"> 
<div class="listName"><a href="">电主轴,需要在45号钢上钻孔，需要电主轴带自给进功能，给进形成在电主轴,需要在45号钢上钻孔</a></div> 
</div> 
<div class="conTel">李经理</div> 
<div class="listInAdress">安徽宿州</div> 
<div class="orgin">在线客服</div> 
<a class="assigneeBtn" href="">分配到人</a> 
<div class="onLine">半小时前</div> 
<div class="clear"></div> 
<div class="winDiaBox" style="display:none;"> <i></i> 
<div class="dialogInfor"> 
<div class="row"> 
<div class="label">日期：</div> 
<div class="cell">2013-7-25 14:54:54</div> 
</div> 
<div class="row"> 
<div class="label">来源：</div> 
<div class="cell">在线客服</div> 
</div> 
<div class="row"> 
<div class="label">客户所在地：</div> 
<div class="cell">上海闵行</div> 
</div> 
<div class="row"> 
<div class="label">联系人：</div> 
<div class="cell">上海闵行</div> 
</div> 
<div class="row"> 
<div class="label">联系方式：</div> 
<div class="cell">上海闵行</div> 
</div> 
<div class="row"> 
<div class="label">QQ：</div> 
<div class="cell">34455566666</div> 
</div> 
<div class="row"> 
<div class="label">询盘详情：</div> 
<div class="cell">想要个3*1300的剪板机，能裁3个的不锈钢板 1300的就行。有现货吗?不含税最低多钱?（烟台）</div> 
</div> 
<div class="row"> 
<div class="label">营销客服：</div> 
<div class="cell">上海闵行</div> 
</div> 
</div> 
</div> 
</li> 
<li> 
<div class="listInName"> 
<div class="listName"><a href="">电主轴,需要在45号钢上钻孔，需要电主轴带自给进功能，给进形成在电主轴,需要在45号钢上钻孔</a></div> 
</div> 
<div class="conTel">李经理</div> 
<div class="listInAdress">安徽宿州</div> 
<div class="orgin">在线客服</div> 
<a class="assigneeBtn" href="">分配到人</a> 
<div class="onLine">半小时前</div> 
<div class="clear"></div> 
<div class="winDiaBox" style="display:none;"> <i></i> 
<div class="dialogInfor"> 
<div class="row"> 
<div class="label">日期：</div> 
<div class="cell">2013-7-25 14:54:54</div> 
</div> 
<div class="row"> 
<div class="label">来源：</div> 
<div class="cell">在线客服</div> 
</div> 
<div class="row"> 
<div class="label">客户所在地：</div> 
<div class="cell">上海闵行</div> 
</div> 
<div class="row"> 
<div class="label">联系人：</div> 
<div class="cell">上海闵行</div> 
</div> 
<div class="row"> 
<div class="label">联系方式：</div> 
<div class="cell">上海闵行</div> 
</div> 
<div class="row"> 
<div class="label">QQ：</div> 
<div class="cell">34455566666</div> 
</div> 
<div class="row"> 
<div class="label">询盘详情：</div> 
<div class="cell">想要个3*1300的剪板机，能裁3个的不锈钢板 1300的就行。有现货吗?不含税最低多钱?（烟台）</div> 
</div> 
<div class="row"> 
<div class="label">营销客服：</div> 
<div class="cell">上海闵行</div> 
</div> 
</div> 
</div> 
</li> 
<li> 
<div class="listInName"> 
<div class="listName"><a href="">电主轴,需要在45号钢上钻孔，需要电主轴带自给进功能，给进形成在电主轴,需要在45号钢上钻孔</a></div> 
</div> 
<div class="conTel">李经理</div> 
<div class="listInAdress">安徽宿州</div> 
<div class="orgin">在线客服</div> 
<a class="assigneeBtn" href="" id="1">分配到人</a> 
<div class="onLine">半小时前</div> 
<div class="clear"></div> 
<div class="winDiaBox" style="display:none;"> <i></i> 
<div class="dialogInfor"> 
<div class="row"> 
<div class="label">日期：</div> 
<div class="cell">2013-7-25 14:54:54</div> 
</div> 
<div class="row"> 
<div class="label">来源：</div> 
<div class="cell">在线客服</div> 
</div> 
<div class="row"> 
<div class="label">客户所在地：</div> 
<div class="cell">上海闵行</div> 
</div> 
<div class="row"> 
<div class="label">联系人：</div> 
<div class="cell">上海闵行</div> 
</div> 
<div class="row"> 
<div class="label">联系方式：</div> 
<div class="cell">上海闵行</div> 
</div> 
<div class="row"> 
<div class="label">QQ：</div> 
<div class="cell">34455566666</div> 
</div> 
<div class="row"> 
<div class="label">询盘详情：</div> 
<div class="cell">想要个3*1300的剪板机，能裁3个的不锈钢板 1300的就行。有现货吗?不含税最低多钱?（烟台）</div> 
</div> 
<div class="row"> 
<div class="label">营销客服：</div> 
<div class="cell">上海闵行</div> 
</div> 
</div> 
</div> 
</li> 
</ul> 
</div> 
</div>

js代码： 
// JavaScript Document 
$(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')) //获取分配到人弹出框的里的id值 
} 
} 
$(function(){ 
bindClick(show,setValue); 
bindClick(addPanelBtn,setValue); 
bindClick(clickBtn,setValue); 
}); 
/*详情弹出框开始*/ 
var listInfo=$(".listName a"); 
listInfo.click(function(e){ 
e.preventDefault(); 
var winDiaBox=$(this).closest("li").find(".winDiaBox"); 
$(".winDiaBox").hide().closest('li').removeAttr('style'); 
if(winDiaBox.is(':visible')) { 
winDiaBox.hide(); 
} else { 
winDiaBox.show().parent("li").siblings("li").removeAttr('style') 
.find(".winDiaBox").hide(); 
$(this).closest("li").css("z-index",4); 
} 
return false; 
}) 
$(".winDiaBox").click(function(){return false;}) 
$(document).click(function(){ 
$(".winDiaBox").hide(); 
$(".winDiaBox").parent().removeAttr("style"); 
}) 
/*详情弹出框结束*/ 
})

详情弹出框随着循环显示，这样减少了用js根据每个循环列表的位置而定位弹出框的位置

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery 表格分页等操作实现代码(pagedown，pageup)
Apr 11 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
node.js中的forEach()是同步还是异步呢
Jan 29 Javascript
javascript数组排序汇总
Jul 07 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
js获取腾讯视频ID的方法
Oct 03 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
通过jQuery学习js类型判断的技巧
May 27 jQuery
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 Javascript
jquery弹出框的用法示例(一)
Aug 26 #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
罗马尼亚购物网站(10) 马耳他购物网站(1) 巴基斯坦购物网站(2) 摩纳哥购物网站(1) 亚洲购物网站(6) 越南购物网站(9) 缅甸购物网站(1) 乌克兰购物网站(27) 约旦购物网站(1) 希腊购物网站(6)
You might like
递归列出所有文件和目录
2006/10/09 PHP
php5 mysql分页实例代码
2008/04/10 PHP
php 取得瑞年与平年的天数的代码
2009/08/10 PHP
Php无限级栏目分类读取的实现代码
2014/02/19 PHP
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
PHP实现C#山寨ArrayList的方法
2015/07/16 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
php读取出一个文件夹及其子文件夹下所有文件的方法示例
2017/06/15 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
2012/02/27 Javascript
jQuery基于json与cookie实现购物车的方法
2016/04/15 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
Python callable内置函数原理解析
2020/03/05 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
PatPat阿根廷：妈妈们的购物平台
2019/05/30 全球购物
印尼第一大家居、生活和家具电子商务：Ruparupa
2019/11/25 全球购物
潘多拉珠宝俄罗斯官方网上商店：PANDORA俄罗斯
2020/09/22 全球购物
优秀小学生家长评语
2014/01/30 职场文书
教师见习期自我鉴定
2014/04/28 职场文书
卫生系统先进事迹
2014/05/13 职场文书
素质教育标语
2014/06/27 职场文书
就业协议书怎么填
2014/09/15 职场文书
党的群众路线教育实践活动对照检查材料（个人）
2014/09/24 职场文书
单位介绍信格式
2015/01/31 职场文书
趣味运动会简讯
2015/07/20 职场文书
2016年母亲节广告语
2016/01/28 职场文书
情况说明书格式及范文
2019/06/24 职场文书
深入浅析Redis 集群伸缩原理
2021/05/15 Redis