Home  >  Article  >  Web Front-end  >  jquery弹出框的用法示例(2)_jquery

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

WBOY
WBOYOriginal
2016-05-16 17:24:22973browse

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

复制代码 代码如下:



询盘分配




  • 询盘详情

  • 联系人

  • 所在地

  • 来源









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 = '
';
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根据每个循环列表的位置而定位弹出框的位置
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn