js div 锁屏实现 -

superyang

浏览: 22827 次
性别:
来自: 广州

最近访客更多访客>>

guochongcan

Alapn

xgrass18

zs396963330

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

js div 锁屏实现

用Jquery实现DIV锁屏并且可以拖拽DIV窗体不做过多解释，可以把以下该代码复制出来运行即可看到效果，注意要引入jquery.js文件哦

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>锁屏的DIV并且可以拖拽</title>
<style>
#showdiv{
display:none;
position:absolute;
width:220px;
height:60px;
background-color:#FFFFFF;
z-index:9999;
padding:12px;
}
#screen{
display:none;
position:absolute;
height:100%;
width:100%;
top:0;
left:0;
background-color:#000000;
z-index:8888;
}
#move{
cursor:move;
}

</style>
<script src="jquery.js"> </script>
<script type="text/javascript">
var popupStatus = 0;
$(function(){
   var $place = function(selector){//目标居中,目标应为绝对定位
     var $t=( $(window).height()-$(selector).height())/2;
     var $l=( $(window).width()-$(selector).width())/2;
     $(selector).css({"left":$l+"px","top":$t+"px"});
   }
   $("#test").click(function(){
      $place ($("#showdiv"));
     $(window).resize(function(){$place ($("showdiv"));}) //调整浏览器大小
      loadPopup();
   });
   $("#btnquxiao").click(function(){
     //仅在开启标志popupStatus为1的情况下去除
     if(popupStatus==1){
      $("#screen").fadeOut("slow");
      $("#showdiv").fadeOut("slow");
      popupStatus = 0;
     }
   });

   $("#move").mouseover(function(event){
    var _move=false;//移动标记
    var _x,_y;//鼠标离控件左上角的相对位置

    $("#move").mousedown(function(e){
     _move=true;
     _x=e.pageX-parseInt($("#showdiv").css("left"));
     _y=e.pageY-parseInt($("#showdiv").css("top"));
    });

    $(document).mousemove(function(e){
     if(_move){
      var x=e.pageX - _x;//移动时根据鼠标位置计算控件左上角的绝对位置
      var y=e.pageY - _y;
      $("#showdiv").css({"top":y,"left":x});//控件新位置
     }
    }).mouseup(function(){
     _move=false;
    });
});
});

function loadPopup(){
    //仅在开启标志popupStatus为0的情况下加载
    if(popupStatus==0){
     $("#screen").css({
      "opacity": "0.5"
     });
     $("#screen").fadeIn("slow");

     $("#showdiv").fadeIn("slow");

      $("body").css({"overflow":"hidden"});

     popupStatus= 1;
    }
}
</script>
</head>
<body>
<div id="screen"></div>
<div id="showdiv">
<div id="move">鼠标移到这里，试试拖动该层</div><br />
    <input type="button" id="btnquxiao" value="取消"/>
</div>
<input id="test" type="button" value="test"/>
</body>
</html>

//-------------------------------------
<html>
<head>
<title>提示信息框 </title>
<style type="text/css">
.msgbox {width:350px;height:120px;border:5px solid #090;margin:10px auto;text-align:center;font-size:14px;background:#F5FAEB;padding:10px;line-height:25px;}
.msgbox .btn {background:#090;font-size:13px;font-weight:700;color:#fff;height:25px;line-height:25px;border:0;}
.msgbox p {margin:0px auto 20px;}
.msgbox p strong {color:#F30;font-size:18px;}
#massage_box
{
     position:absolute;
     left:expression((body.clientWidth-350)/2);
     top:expression((body.clientHeight-200)/2);
     filter:dropshadow(color=#666666,offx=3,offy=3,positive=2);
     z-index:2; visibility:hidden;
}
#mask
{
     position:absolute;
     top:0; left:0;
     width:expression(body.scrollWidth);
     height:expression(body.scrollHeight);
     background:#ffffff;
     filter:ALPHA(opacity=60);
     z-index:1;
     visibility:hidden;
}
.massage{border:#036 solid; border-width:1 1 3 1; width:95%; height:95%; background:#fff; color:#036; font-size:12px; line-height:150%}
.header{background:#036; height:10%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:3 5 0 5; color:#fff}
</style>

<script type="text/javascript">
function lockscree(){
     mask.style.visibility='visible';
     massage_box.style.visibility='visible'
}
function ulockscreen(){
     massage_box.style.visibility='hidden';
     mask.style.visibility='hidden'
}
</script>
</head>
<body>
<div class="msgbox" id="massage_box">
<p>您的离线时间超过<strong>30</strong>分钟，<br />
为了保证数据查询的准确性，建议您重新查询</p>
<input type="button" class="btn" name="" value="重新查询"/>   <input type="button" onclick="ulockscreen();" class="btn" value="取消"/>
</div>

<div id="mask"> </div>

<span onclick="javascript:lockscree();" style="cursor:hand">锁屏</span>
<div style=" height:3000px;"></div>
测试
</body>
</html>

///

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>纯CSS Lightbox效果</title>
        <style>
        .black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color:#EEEEEE;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
        }
        .white_content {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 50%;
            padding: 16px;
            border: 16px solid orange;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }
    </style>
    </head>
    <body>
        <p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
        <div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
        <div id="fade" class="black_overlay"></div>
    </body>
</html>

分享到：