您的位置：首页 > 其它

Windows Server 2012 Datacenter 建立iSCSI服务器与 vSphere5.1对接

2012-11-12 19:47 197 查看

用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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Windows Server 2012 Datacenter 建立iSCSI服务器 与 vSphere5.1对接

Windows Server 2012 Datacenter 建立iSCSI服务器与 vSphere5.1对接