<html>
<head>
<script type="text/javascript">
//创建透明遮罩层div
var transprentHTML = document.createElement('div');
//创建消息提示框
var pullOperationHTML = document.createElement('div');
//获取浏览器的宽度
function browserWidth()
{
//定义初始变量，浏览器的宽度
var winWidth = 0;
if (window.innerWidth){
winWidth = windows.innerWidth;
}else if ((document.body) && (document.body.clientWidth)){
winWidth = document.body.clientWidth;
}
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientWidth)
{
winWidth = document.documentElement.clientWidth;
}
return winWidth;
}
//获取浏览器的高
function browserHeight()
{
//定义初始变量，浏览器的高度
var winHeight = 0;
if (window.innerHeight){
winHeight = windows.innerHeight;
}else if ((document.body) && (document.body.clientHeight)){
winHeight = document.body.clientHeight;
}
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight)
{
winHeight = document.documentElement.clientHeight;
}
return winHeight;
}
//创建一个透明遮罩层
function transprentDiv()
{
transprentHTML.style.background="hotpink";//设置创建透明遮罩层Div的背景颜色
transprentHTML.style.width=browserWidth()+"px";//设置创建透明遮罩层Div的宽度
transprentHTML.style.height=browserHeight()+"px";//设置创建透明遮罩层Div的高度
transprentHTML.style.position="absolute";//设置创建透明遮罩层Div的绝对位置
transprentHTML.style.top="0px";//设置创建透明遮罩层Div据浏览器上边的边距
transprentHTML.style.left="0px";//设置创建透明遮罩层Div据浏览器左边的边距
transprentHTML.style.filter="Alpha(Opacity='40',FinishOpacity='90',Style='3')";//设置创建透明遮罩层Div的透明度
transprentHTML.style.zIndex="100";//设置创建透明遮罩层Div的层次
transprentHTML.style.display="none";//设置创建透明遮罩层初始化不显示
}
//创建透明层上的提示框
function pullOperationDiv()
{
//pullOperationHTML.style.background="skyblue";//设置创建提示框Div的背景颜色
pullOperationHTML.style.border="10px solid skyblue";//设置创建提示框Div的层次
pullOperationHTML.style.width="400px";//设置创建提示框Div的宽度
pullOperationHTML.style.height="300px";//设置创建提示框Div的高度
pullOperationHTML.style.position="absolute";//设置创建提示框Div的绝对位置
//设置创建提示框Div据浏览器上边的边距,（首先减去弹出层的高度，然后用剩余的高度除以2，得到提示框据浏览器上边距的距离）
pullOperationHTML.style.top=(browserHeight()-300)/2+"px";
//设置创建提示框Div据浏览器上边的边距,（首先减去弹出层的宽度度，然后用剩余的宽度度除以2，得到提示框据浏览器左边距的距离）
pullOperationHTML.style.left=(browserWidth()-400)/2+"px";
pullOperationHTML.style.zIndex="101";//设置创建提示框Div的层次
pullOperationHTML.style.display="none";//设置创建提示框初始化不显示
//调用提示消息内容
pullHeadMsg();
//调用鼠标拖放事件
pullOperationDivMove(pullOperationHTML);
}
//给提示框添加内容
function pullHeadMsg()
{
pullOperationHTML.innerHTML="<div id='headDiv' style='width:100%;height:8%;background-color:gray;'>"+
"<div style='width:90%;height:100%;float:left;font-size:25px;font-weight:bold;color:#0000dd;cursor:move;'><em>温馨提示</em></div>"+
"<div style='width:10%;height:100%;'><input type='image' src='' οnclick='pullHeadMsgButton(0);'></div>"+
"</div>"+
"<div id='bodyDiv' style='width:100%;height:82%;background-color:lime;'></div>"+
"<div id='footDiv' style='width:100%;height:10%;background-color:skyblue;text-align:right;'>"+
"<label><input type='button' id='okButton' value='确定' οnclick='pullHeadMsgButton(1);'/></label> "+
"<label><input type='button' id='cansleButton' value='取消' οnclick='pullHeadMsgButton(0);'/></label>"+
"</div>";
}
function pullOperationDivMove(moveId){
//鼠标拖动div的事件，e和event是事件对象
moveId.οnmοusedοwn=function(e){
e = e || window.event;
var x= e.layerX || e.offsetX; //兼容IE和火狐
var y= e.layerY || e.offsetY; //兼容IE和火狐
//设置捕获范围
//该函数从当前线程中的窗口释放鼠标捕获，并恢复通常的鼠标输入处理。捕获鼠标的窗口接收所有的鼠标输入
//setCapture 的意思就是设置一个对象的方法被触发的范围,或者作用域
if(moveId.setCapture){
moveId.setCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); //鼠标的一处或被点下
}
//鼠标移动事件
document.οnmοusemοve=function(e){
e= e || window.event;
if(!e.pageX)e.pageX=e.clientX;
if(!e.pageY)e.pageY=e.clientY;
var tx=e.pageX-x;
var ty=e.pageY-y;
moveId.style.left=tx;
moveId.style.top=ty;
};
//onmouseup鼠标左键释放
document.οnmοuseup=function(){
//取消捕获范围
if(moveId.releaseCapture){
moveId.releaseCapture(); //重新设置该div被触发的范围
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
//鼠标左键释放之后，清除事件
document.οnmοusemοve=null;
document.οnmοuseup=null;
};
};
}
//透明层，和弹出框的显示
function transprentDivDisplay()
{
if(transprentHTML.style.display=='none')
{
transprentHTML.style.display='block';
pullOperationHTML.style.display='block';
}
}
//点击提示框，确定和取消按钮触发事件
function pullHeadMsgButton(bool)
{
//判断透明遮罩层,消息提示框，是否处在显示状态，如果是，则关闭
if(transprentHTML.style.display=='block'){
transprentHTML.style.display='none';
pullOperationHTML.style.display='none';
//判断用户点击提示框上面的那个按钮，1代表确定，0代表取消
if(bool==1){
return true;
}else{
return false;
}
}
}
//显示透明遮罩层
function showTransprentDiv()
{
//调用创建的透明层
transprentDiv();
//调用透明层上的提示框
pullOperationDiv();
var bodyObject = document.body;//获取body对象
bodyObject.insertBefore(transprentHTML,bodyObject.lastChild);
//动态的将创建的提示框插入到body中，
bodyObject.insertBefore(pullOperationHTML,bodyObject.lastChild);
//透明层，和弹出框的显示和隐藏
transprentDivDisplay();
}
</script>
</head>
<body>
<div style="width:500px;height:500px;margin-left:400px;">
<h1>第一步：页面加载时，js创建透明遮罩层"transprentHTML"和消息提示框"pullOperationHTML"</h1>
<h1>第二步：调用showTransprentDiv()此方法，给第一步创建的两个div分别添加样式并控制层次，这时，透明遮罩层的宽高是获取浏览器的宽高</h1>
<h1>第三步：消息提示框可以任意拖动，具体步骤代码中有详细注释</h1>
<input type="button" value="弹出遮罩层" οnclick="showTransprentDiv()"/>
</div>
</body>
</html>
js弹出透明背景遮罩层
最新推荐文章于 2024-07-20 23:54:17 发布
1600
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
