基于jquery的可移动dialog 和页面遮盖层

最新推荐文章于 2023-04-26 18:24:26 发布

Cao Lilu

最新推荐文章于 2023-04-26 18:24:26 发布

阅读量3k

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/crown_0726/article/details/42217697

版权

前端开发专栏收录该内容

46 篇文章 0 订阅

订阅专栏

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();
}

Cao Lilu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于jquery的可移动dialog 和页面遮盖层

jquery的版本是1.xHTML代码为：moveDialog .win{ width:300px; height:300px; background:#658CCD; position:absolute; left:0; top:0; display:none; } .wTop{ height:30px; width:100%;
复制链接

扫一扫