<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="test.css" media="screen" rel="stylesheet" type="text/css" />
<title>IE-firfox-弹出 背景 拖动层</title>
<script type="text/javascript">
//获取滚动条的高度
function getPageScroll(){
var xScroll,yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset;
xScroll = self.pageXOffset;
} else if (document.documentElement && document.documentElement.scrollTop){
yScroll = document.documentElement.scrollTop;
}else if (document.documentElement && document.documentElement.scrollLeft){
xScroll = document.documentElement.scrollLeft;
} else if (document.body) {
yScroll = document.body.scrollTop;
xScroll = document.body.scrollLeft;
}
arrayPageScroll = new Array(xScroll,yScroll)
return arrayPageScroll;
}
//获取页面实际大小
function getPageSize(){
var xScroll,yScroll;
if (window.innerHeight && window.scrollMaxY){
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){
sScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else {
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth,windowHeight;
//var pageHeight,pageWidth;
if (self.innerHeight) {
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) {
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
var pageWidth,pageHeight
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
if(xScroll < windowWidth) {
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}
//弹出层
function openLayer(objId,conId,w,h){
var arrayPageSize = getPageSize();//调用getPageSize()函数
var arrayPageScroll = getPageScroll();//调用getPageScroll()函数
if (!document.getElementById("popupAddr")){
//创建弹出内容层
var popupDiv = document.createElement("div");
//给这个元素设置属性与样式
popupDiv.setAttribute("id","popupAddr")
popupDiv.style.position = "absolute";
popupDiv.style.zIndex = 99;
popupDiv.style.width = w + "px";
popupDiv.style.height = h + "px";
//创建弹出背景层
var bodyBack = document.createElement("div");
bodyBack.setAttribute("id","bodybg")
bodyBack.style.position = "absolute";
bodyBack.style.width = "100%";
bodyBack.style.height = (arrayPageSize[1] + 35 + 'px');
bodyBack.style.zIndex = 98;
bodyBack.style.top = 0;
bodyBack.style.left = 0;
bodyBack.style.filter = "alpha(opacity=80)";
bodyBack.style.opacity = 0.8;
bodyBack.style.background = "#ddf";
//实现弹出(插入到目标元素之后)
var mybody = document.getElementById(objId);
insertAfter(popupDiv,mybody);//执行函数insertAfter()
insertAfter(bodyBack,mybody);//执行函数insertAfter()
}
//显示背景层
document.getElementById("bodybg").style.display = "";
//显示内容层
var popObj=document.getElementById("popupAddr")
popObj.innerHTML = document.getElementById(conId).innerHTML;
popObj.style.display = "";
//让弹出层在页面中垂直左右居中(个性)
var arrayConSize=getConSize(conId,w,h)
if(arrayPageSize[3] < arrayConSize[1])
popObj.style.top = 0 + 'px';
else
popObj.style.top = arrayPageScroll[1] + (arrayPageSize[3] - arrayConSize[1]) / 2 + 'px';
if(arrayPageSize[0] < arrayConSize[0])
popObj.style.left = 0 + 'px';
else
popObj.style.left = (arrayPageSize[0] - arrayConSize[0]) / 2 + 'px';
}
//获取内容层内容原始尺寸
function getConSize(conId,w,h){
var conObj=document.getElementById(conId)
conObj.style.position = "absolute";
conObj.style.left=-1000+"px";
conObj.style.display="";
conObj.style.width= w + "px";
conObj.style.height= h + "px";
var arrayConSize=[0,0];
arrayConSize[0]=conObj.offsetWidth;
arrayConSize[1]=conObj.offsetHeight;
conObj.style.display="none";
return arrayConSize;
}
//插入
function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}
else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
//关闭弹出层
function closeLayer(){
document.getElementById("popupAddr").style.display = "none";
document.getElementById("bodybg").style.display = "none";
return false;
}
//拖拽
//对“拖动点”定义:onMousedown="StartDrag(event)"即可
var move=false,_X,_Y;
var isIE = document.all ? true : false;
function StartDrag(e){ //定义准备拖拽的函数 按下鼠标onMousedown
var parentwin=document.getElementById("popupAddr");
var d = document;
var e = e ? e : event;
if(isIE){parentwin.setCapture(); //对当前对象的鼠标动作进行跟踪
}else{
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
move=true;
//获取鼠标相对内容层坐标
_X=parentwin.offsetLeft-e.clientX
_Y=parentwin.offsetTop-e.clientY
var arrayPageSize = getPageSize();//调用getPageSize()函数
var arrayPageScroll = getPageScroll();//调用getPageScroll()函数
d.onmousemove = function(e){//定义拖拽函数 鼠标放上 拖动onMousemove
var e = e ? e : Event;
if(move){
var parentwin=document.getElementById("popupAddr");
var x = e.clientX+_X
var y = e.clientY+_Y
if (x<=0)
x = 0
if (y<=0)
y = 0
parentwin.style.left= (x)+ "px";;
parentwin.style.top= (y)+ "px";;
}
}
d.onmouseup = function (){//定义停止拖拽函数 松开鼠标 onMouseup
//停止对当前对象的鼠标跟踪
if(isIE){parentwin.releaseCapture();}
else{window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);}
move=false;
}
}
</script>
</head>
<body>
<input name="Input" id="test3" value="弹出层" type="button" onclick="openLayer('test3','test','400','300')" />
<div id="test" style="display:none">
<div id="contain" class="contain">
<div id="dtit" class="dlgtit" onMousedown="StartDrag(event)">
<div id="tl"></div>
<div id="tc"><span>弹出普通带遮罩层的窗口-标题</span></div>
<div id="tr"></div>
<div id="xbtn" onclick="closeLayer();" onMouseover="this.style.backgroundPosition = '0 -19px';" onMouseout="this.style.backgroundPosition = '0 0';"></div>
</div>
<div id="dinner" class="dlginner" style="height: 238px;">
<div id="throbber" style="position:absolute;visibility:hidden;">正在加载窗口内容,请稍等....< /div>
</div>
<div id="dfoot" class="dlgfoot">
<div id="bl"></div>
<div id="bc"></div>
<div id="br"></div>
<div id="cbtn" onclick="closeLayer();" onMouseover="this.style.backgroundPosition = '0 -21px';" onMouseout="this.style.backgroundPosition = '0 0';"><span>取 消</span></div>
<div id="obtn" onclick="alert('确定事件!');" onMouseover="this.style.backgroundPosition = '0 -21px';" onMouseout="this.style.backgroundPosition = '0 0';"><span>确 定</span></div>
</div>
</div>
</div>
</body>
</html>
分享到:
相关推荐
js+html5实现半透明遮罩层弹框效果.docx
1 、半透明效果可以使用 css3 中的 opacity 属性,在低版本的IE浏览器中使用IE的alpha 滤镜。代码: .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; } 2 、要覆盖整个可视区域通常的...
主要为大家详细介绍了js+html5实现半透明遮罩层弹框效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
HTML5+CSS3 制作的图片半透明遮罩效果
WPF弹出半透明遮罩,比较简单,适合初学者
自定义半透明遮罩层
在网页中通过div+css实现半透明效果不难,在winfrom中实现的方法,C#自定义控件半透明遮罩层
非常方便实用的遮罩层弹窗效果,代码简单易懂,相信在你的开发中能够使用到。
可在目标控件上显示或隐藏半透明遮罩层,支持透明度和颜色自定义,支持在遮罩层上显示自定义文本,文本颜色可调。已封装有x86/x64/AnyCpu三种dll,使用时引用相应的dll调用相关方法即可,方法参数说明已以截图形式放...
一款精美的css3半透明遮罩背景lightbox图片展示特效,这个lightbox效果共有三种展示图片的效果:渐隐效果,淡入淡出效果和全屏放大在缩小效果。
QT实现半透明遮罩Demo
C#写的自定义半透明遮罩层,教程类的东西。我也是收集别人的!
winform自定义半透明遮罩层-源码,可实现加载状态
半透明遮罩源文件fla
在winform中实现的遮罩层效果
利用div+css制作弹出层并遮罩层,主用用了两个div,一个div用于弹出框,另一个则遮罩整个页面
自定义透明遮罩层
一款实用的jQuery鼠标悬停半透明遮罩效果.zip 一款实用的jQuery鼠标悬停半透明遮罩效果.zip 一款实用的jQuery鼠标悬停半透明遮罩效果.zip