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

2019-11-20 22:21:50

字體：大中小

來源：轉載

供稿：網友

第二種情況是關于彈出框，沒有關閉按鈕，但是點擊其他地方的時候，彈出框消失，這個還涉及到一些關于層次問題，必須用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"); 
}) 
/*詳情彈出框結束*/ 
}) 