jquery弹出框的用法示例(2)_Javascript教程-查字典教程网

摘要：第二种情况是关于弹出框，没有关闭按钮，但是点击其他地方的时候，弹出框消失，这个还涉及到一些关于层次问题，必须用js给弹出框的父元素加上更高的...

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

复制代码代码如下:

<div>

<div>

<ul>

</ul>

</div>

<div>

<ul>

<li>

<div>

<div><a href="">电主轴,需要在45号钢上钻孔，需要电主轴带自给进功能，给进形成在电主轴,需要在45号钢上钻孔</a></div>

</div>

<div>

</div>

<div>

</div>

<div>

<div>客户所在地：</div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

<div>想要个3*1300的剪板机，能裁3个的不锈钢板 1300的就行。有现货吗?不含税最低多钱?（烟台）</div>

</div>

<div>

</div>

</li>

<li>

<div>

<div><a href="">电主轴,需要在45号钢上钻孔，需要电主轴带自给进功能，给进形成在电主轴,需要在45号钢上钻孔</a></div>

</div>

<div>

</div>

<div>

</div>

<div>

<div>客户所在地：</div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

<div>想要个3*1300的剪板机，能裁3个的不锈钢板 1300的就行。有现货吗?不含税最低多钱?（烟台）</div>

</div>

<div>

</div>

</li>

<li>

<div>

<div><a href="">电主轴,需要在45号钢上钻孔，需要电主轴带自给进功能，给进形成在电主轴,需要在45号钢上钻孔</a></div>

</div>

<div>

</div>

<div>

</div>

<div>

<div>客户所在地：</div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

<div>想要个3*1300的剪板机，能裁3个的不锈钢板 1300的就行。有现货吗?不含税最低多钱?（烟台）</div>

</div>

<div>

</div>

</li>

<li>

<div>

<div><a href="">电主轴,需要在45号钢上钻孔，需要电主轴带自给进功能，给进形成在电主轴,需要在45号钢上钻孔</a></div>

</div>

<div>

</div>

<div>

</div>

<div>

<div>客户所在地：</div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

<div>想要个3*1300的剪板机，能裁3个的不锈钢板 1300的就行。有现货吗?不含税最低多钱?（烟台）</div>

</div>

<div>

</div>

</li>

</ul>

</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></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根据每个循环列表的位置而定位弹出框的位置