1. 程式人生 > >基於jquery的可移動dialog 和 頁面遮蓋層

基於jquery的可移動dialog 和 頁面遮蓋層

jquery的版本是1.x

可移動的DiaLog

HTML程式碼為:

<!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>moveDialog</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/moveDialog.js"></script>
<style type="text/css">
	.win{
		width:300px;
		height:300px;
		background:#658CCD;
		position:absolute;
		left:0;
		top:0;
		display:none;
	} 
	.wTop{
		height:30px;
		width:100%;
		cursor:move;
	} 
	.content{
		height:260px;
		width:95%;
		margin:0 auto;
		border:1px solid #000000;
		background:white;
	} 
</style>
</head>
<body>
	<button id="show">顯示</button> 
	<button id="hidden">隱藏</button> 
	<div class="win"> 
		<div class="wTop"><p style="float:right;margin:5px 5px 0px 0px;color:white">X</p></div> 
		<div class="content"></div> 
	</div>  
</body>  
</html>

js程式碼為:
// JavaScript Document
// 拖動視窗  
$(document).ready(function(){
	//初始化位置 
	initPosition();
	//拖拽 
	dragAndDrop(); 
	//點選按鈕 
	clickShowBtn(); 
});

//拖拽 
function dragAndDrop(){
	var _move = false;//移動標記 
	var _x,_y;//滑鼠離控制元件左上角的相對位置 
	$(".wTop").mousedown(function(e){ 
		_move = true; 
		_x = e.pageX - parseInt($(".win").css("left")); 
		_y = e.pageY - parseInt($(".win").css("top")); 
	}); 
	$(document).mousemove(function(e){ 
		if(_move){ 
		var x = e.pageX - _x;//移動時滑鼠位置計算控制元件左上角的絕對位置 
		var y = e.pageY - _y; 
		$(".win").css({top:y,left:x});//控制元件新位置 
		} 
	}).mouseup(function(){ 
		_move=false;
	}); 
} 
//初始化拖拽div的位置 
function initPosition(){ 
	//計算初始化位置 
	var itop = ($(document).height()-$(".win").height())/2; 
	var ileft = ($(document).width()-$(".win").width())/1.8; 
	//設定被拖拽div的位置 
	$(".win").css({top:itop,left:ileft}); 
} 
//點選顯示移動框
function clickShowBtn(){ 
	$("#show").click(function(){ 
		$(".win").show(); 
	}); 
	//點選隱藏移動框
	$("#hidden").click(function(){ 
		$(".win").hide(); 
	}); 
}


js遮蓋層

js程式碼為:

$(document).ready(function(){
	// 啟動
	// startCovered();
	// 結束
	// endCovered();
	$("#dianji").click(function(){
		startCovered();
	});
	$("#qudiao").click(function(){
	
		endCovered();
	});
});
function startCovered(){
	var documentWidth = $(document).width();
	var documentHeight = $(document).height();
	var coveredCss = 'position:absolute;';
	coveredCss += 'top:0px;';
	coveredCss += 'left:0px;';
	coveredCss += 'z-index:1000;';
	coveredCss += 'width:' + documentWidth + 'px;';
	coveredCss += 'height:' + documentHeight + 'px;';
	coveredCss += 'background-color:#000;';
	coveredCss += 'filter:alpha(opacity=50);';
	coveredCss += '-moz-opacity:0.5;';
	coveredCss += 'opacity: 0.5;';
	
	var coverFloor = '<div style="' + coveredCss + '" id="coveredDIV" name="coveredDIV"></div>';
	$("body").append(coverFloor);
}
function endCovered(){
	$("#coveredDIV").remove();
}