js弹出透明背景遮罩层 -

jirang_team

浏览: 5019 次
性别:
来自: 北京

最近访客更多访客>>

AITop_Leader

zwm250133903

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

js弹出透明背景遮罩层

<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='' onclick='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='确定' onclick='pullHeadMsgButton(1);'/></label>  "+
            "<label><input type='button' id='cansleButton' value='取消' onclick='pullHeadMsgButton(0);'/></label>"+
           "</div>";
   }
   function pullOperationDivMove(moveId){
   //鼠标拖动div的事件，e和event是事件对象
    moveId.onmousedown=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.onmousemove=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.onmouseup=function(){
     //取消捕获范围
      if(moveId.releaseCapture){
       moveId.releaseCapture(); //重新设置该div被触发的范围
      }else if(window.captureEvents){
       window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
      }
      //鼠标左键释放之后，清除事件
      document.onmousemove=null;
      document.onmouseup=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="弹出遮罩层" onclick="showTransprentDiv()"/>
  </div>
</body>
</html>