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

524 阅读 0 评论 346 点赞

我是靠谱客的博主顺利板栗，最近开发中收集的这篇文章主要介绍jquery弹出框的用法示例(2)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

第二种情况是关于弹出框，没有关闭按钮，但是点击其他地方的时候，弹出框消失，这个还涉及到一些关于层次问题，必须用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"); 
}) 
/*详情弹出框结束*/ 
}) 