首页
所有分类
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——表单应用范例
Feb 20 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 Javascript
javascript制作2048游戏
Mar 30 Javascript
深入理解(function(){... })();
Aug 16 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
浅谈Node.js 中间件模式
Jun 12 Javascript
如何在微信小程序中存setStorage
Dec 13 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
vue实现输入框自动跳转功能
May 20 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
celery(1) Outlook(1) Mysql8(2) 黑屏(2) minio(1) Windows server 2003(1) mysqldump(1) appdata(1) ACID(1) sentinel(1)
You might like
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
php Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
深入理解PHP中的count函数
2016/05/31 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
PHP基于socket实现客户端和服务端通讯功能
2017/07/13 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
JavaScript插件化开发教程 （四）
2015/01/27 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
vue组件定义，全局、局部组件，配合模板及动态组件功能示例
2019/03/19 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
JS实现滑动导航效果
2020/01/14 Javascript
vue中activated的用法
2021/01/03 Vue.js
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
详解Python中的四种队列
2018/05/21 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
python实现自动化上线脚本的示例
2019/07/01 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
Set里的元素是不能重复的，那么用什么方法来区分重复与否呢？ 是用==还是equals()？ 它们有何区别？
2014/07/27 面试题
文明寄语大全
2014/04/11 职场文书
程序员求职信
2014/04/16 职场文书
大学国际贸易专业自荐信
2014/06/05 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
党员思想汇报材料
2014/12/19 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL