//css样式
.over_layer{
background-color: black;
display: none;
height: 100%;
left: 0;
opacity: 0.5;
position: absolute;
top: 0;
width: 100%;
z-index: 1001;
}
//遮蔽层
<div id="fade" class="over_layer" style="background:black; filter: alpha(opacity=50); opacity: 0.5; -moz-opacity:0.5;"></div>
//js
function getScrollTop(){
var scrollTop = 0;
if(document.documentElement && document.documentElement.scrollTop){
scrollTop = document.documentElement.scrollTop;
}else if(document.body){
scrollTop = document.body.scrollTop;
}
return scrollTop;
}
var wcontentflag = false,wcontentX=null,wcontentY=null,offsetWidth=null,offsetHeigth=null,isaddoffset=false;
function showModel(showId,isdrop){
$("#fade").css("height",window.screen.availHeight+parseFloat(getScrollTop()));
$("#fade").css("width",window.screen.availWidth);
try{
$("#"+showId).css("z-index",1005);
$("#"+showId).css("position","absolute");
$("#"+showId).css("top",20+parseFloat(getScrollTop()));
$("#"+showId).css("left",window.screen.availWidth/2-parseFloat($("#"+showId).css("width"))/2);
}catch(e){}
if(typeof(isdrop)=='undefined' || isdrop == true){
$("#"+showId).bind("mousedown",function(e){
if(!wcontentflag){
wcontentflag = true;
wcontentX = e.pageX;
wcontentY = e.pageY;
offsetWidth = e.pageX - parseFloat($(this).css("left"));
offsetHeight = e.pageY - parseFloat($(this).css("top"));
$(this).css("cursor","pointer");
}
});
$("body").bind("mousemove",function(e){
if(wcontentflag){
var nowPageX = e.pageX;
var nowPageY = e.pageY;
var nowObjX = parseFloat($("#"+showId).css("left"));
var nowObjY = parseFloat($("#"+showId).css("top"));
nowObjX = parseFloat(nowObjX) + (nowPageX-nowObjX);
nowObjY = parseFloat(nowObjY) + (nowPageY-nowObjY);
nowObjX -= offsetWidth;
nowObjY -= offsetHeight;
$("#"+showId).css({left:nowObjX,top:nowObjY});
$("#"+showId).css({left:nowObjX,top:nowObjY});
}
});
$("body").bind("mouseup",function(e){
if(wcontentflag){
wcontentflag = false;
isaddoffset =false;
$("#"+showId).css("cursor","default");
}
});
}
showAndHidden(showId,'show');
showAndHidden('fade','show');
}
js 遮蔽层+拖拽
最新推荐文章于 2022-12-31 23:36:53 发布