首页
所有分类
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 学习笔记 选择器之三
Jul 23 Javascript
理解Javascript_13_执行模型详解
Oct 20 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果，仅3行代码
Sep 21 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
jQuery插件pagination实现无刷新分页
May 21 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
Apr 13 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 14 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
表变量(1) mixin(1) 游标(1) ip连接(1) 临时表(1) ref(1) GTID(1) ECharts(3) props(1) postcss-px2rem(1)
You might like
微盾PHP脚本加密专家php解密算法
2020/09/13 PHP
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
php模板函数 正则实现代码
2012/10/15 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
js数组方法扩展实现数组统计函数
2014/04/09 Javascript
NodeJS学习笔记之Connect中间件模块（一）
2015/01/27 NodeJs
纯JS代码实现一键分享功能
2016/04/20 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
python根据文件大小打log日志
2014/10/09 Python
使用python实现tcp自动重连
2017/07/02 Python
python实现图片识别汽车功能
2018/11/30 Python
Python中的heapq模块源码详析
2019/01/08 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
pyspark 随机森林的实现
2020/04/24 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
英国国家美术馆商店：National Gallery
2019/05/01 全球购物
博柏利美国官方网站：Burberry美国
2020/11/19 全球购物
教师职位说明书
2014/07/29 职场文书
2014年仓库工作总结
2014/11/20 职场文书
营业员岗位职责范本
2015/04/14 职场文书
导游词之江西赣州
2019/10/15 职场文书
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS
Redis基本数据类型Set常用操作命令
2022/06/01 Redis