CSS+DIV做的可拖动带遮罩层的DIV，圆角也是用CSS实现

最新推荐文章于 2025-05-27 21:41:06 发布

YogiLai

最新推荐文章于 2025-05-27 21:41:06 发布

阅读量2.2k

点赞数

分类专栏： css 文章标签： css div class javascript function float

css 专栏收录该内容

19 篇文章

订阅专栏

artDialog是一个基于javascript编写的对话框组件，提供自适应内容、完善接口、跨平台兼容性等功能。本文详细介绍了其特性及使用方法，包括如何解决FF浏览器中锚点链接导致的问题，以及代码实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

artdialog

artDialog是一个基于javascript编写的对话框组件，精致的界面与易用的接口是它的优势

自适应内容

artDialog的特殊UI框架能够适应内容变化，甚至连外部程序动态插入的内容它仍然能自适应，因此你不必去考虑消息内容尺寸使用它。它的消息容器甚至能够根据宽度让文本居中或居左对齐——这一切全是XHTML+CSS原生实现。

完善的接口

它的接口完善，可以轻易与外部程序配合使用。如异步写入消息、控制位置、尺寸、显示与隐藏、关闭等。

细致的体验

如果不是在输入状态，它支持Esc快捷键关闭；可吸附到触发元素附近弹出让操作更便捷；智能给按钮添加焦点；黄金比例垂直居中；超大响应区域在ipad等触屏下更易用；预先缓存皮肤图片更快响应……

跨平台兼容

兼容：IE6+、Firefox、Chrome、Safari、Opera以及iPad等移动设备。并且IE6下也能支持现代浏览器的静止定位( fixed)、覆盖下拉控件、alpha通道png背景。

___________________________________________________________________________________________________________________________________

http://bbs.blueidea.com/thread-2964362-1-1.html

怎么这么多人就那么懒呢，下面我也写了 FF需要保存文件去看，刚改了个href
<a href="#" onClick="show('t')">点我</a> 变成了 <a href="javascript" onClick="show('t')">点我</a>
对于FF在这里不兼容是因为 #这个锚点的原因，找不到对应的id会返回页首，FF可能会刷一次页面导致显示问题
不过也好，大家提了这些问题可以更深入的了解一些解决问题哈哈！

首先说明，本人不是美工，主要做java后台，前台页面只是为了展示效果才自学了一些，一个简陋的效果，暂时没有实现拖动的边界限制
圆角使用3个<U>实现的，通过宽度不同模仿圆角的实现
部分代码没有单独拿出来而是放到了 style属性里，这个先这样吧
JS方面没有用原来的浏览器检测，而是用的功能检测，拖动的JS可能不是太好，记得好像把onmouseup放到onmousemove里面比较好，暂时没有去编代码
增加了在窗口改变大小或者拖动滚动条的时候遮罩范围的重新检测

借鉴了很多代码综合起来的这个，毕竟这东西现在大都是C & V，没有什么新的技术
第一次发代码贴，欢迎拍砖

<style>
body{
	margin:0px;
	padding:0px;
	font-size:14px;
}

#t	{
	position:absolute;
	float:left;
	left:0px;
	top:0px;
}

#a	{
	float:left;
}

.al	{
	opacity: 0.80;
	filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=80,finishOpacity=100);
}
.al2{
	opacity: 0.00;
	filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0,finishOpacity=100);
}

U {
	DISPLAY: block;
	OVERFLOW: hidden;
	HEIGHT: 1px
}
U.f1 {
	background-color:#5cc;
	BACKGROUND: #5cc;
	MARGIN: 0px 3px
}
U.f2 {
	background-color:#5cc;
	BORDER-RIGHT: #5cc 2px solid;
	MARGIN: 0px 1px;
	BORDER-LEFT: #5cc 2px solid
}
U.f3 {
	background-color:#5cc;
	BORDER-RIGHT: #5cc 1px solid;
	MARGIN: 0px 1px;
	BORDER-LEFT: #5cc 1px solid
}

.d_top{
	clear:both;
	overflow:hidden;
	background-color:#5cc;
	height:29px;
	vertical-align:bottom;
}
.d_top a{
	float:right;
	margin-top:5px;
	margin-right:13px;
	padding-top:3px;
	width:18px;
	color:red;
	background-color:#789;
	text-decoration:none;
	font-weight:bold;
	text-align:center;
	vertical-align:middle;
}
.d_top span{
	float:left;
	font-size:13px;
	margin-left:15px;
	margin-top:8px;
	
}
.d_body {
	BORDER-RIGHT: #5cc 3px solid;
	BORDER-LEFT: #5cc 3px solid;
	padding:10px;
	height:200px;
	background-color:#fff;
}
.d_foot{
	clear:both;
	overflow:hidden;
	background-color:#5cc;
	height:2px;
}

</style>

<script type="text/javascript">
	function $(id){return document.getElementById(id);}
	function show(id){
		var t = $(id);
		t.style.width=document.body.clientWidth;
		t.style.height=document.body.clientHeight;
		window.onresize=function(){
			t.style.width=document.body.clientWidth;
			t.style.height=document.body.clientHeight;
		}
		$(id).style.display="";
	}
	function cl(id){
		$(id).style.display="none";
	}

	
//-------------------------------------------------------------------------------
function moveEvent(e,id){
	var isIE = (document.all)?true:false;
	//navigator.userAgent.toLowerCase().indexOf("msie") != -1;
	//var event=window.event||event;
	drag = true;
	xx=isIE?event.x:e.pageX;
	yy=isIE?event.y:e.pageY;
	L = document.getElementById(id).offsetLeft;
	T = document.getElementById(id).offsetTop;

	document.onmousemove = function(e) {
		if (drag) {
			x=isIE?event.x:e.pageX;		if(x<0)x=0;
			y=isIE?event.y:e.pageY;		if(y<0)y=0;
			document.getElementById(id).style.left = L-xx+x;
			document.getElementById(id).style.top  = T-yy+y;
		}
	}
	document.onmouseup=function(){
		drag = false;
	}
}
//-------------------------------------------------------------------------------

window.onscroll=function(){
	$("back_div").style.width=document.body.scrollWidth;
	$("back_div").style.height=document.body.scrollHeight;
}


</script>
<body>
	<div id="a" style="position:absolute; left:300px; top:200px;">
		<a href="javascript:" onClick="show('t')">点我</a>
		<select></select><select></select><select></select><select></select>
		<select></select><select></select><select></select><select></select>
		<select></select><select></select><select></select><select></select>
		<select></select><select></select><select></select><select></select>
	</div>
	
	<div id="t" style="display:none;">
		<div style="width:100%;height:100%; z-index:-1; position:absolute; float:left; background-color:#555;overflow:hidden;" class="al" id="back_div">
		<iframe style="position:absolute; left:0px; top:0px; left:0px; bottom:0px; float:left; z-index:-1; margin:0px; padding:0px;" frameborder="0" scrolling="no" width="100%" height="2000px;" class="al2" id="ifr"></iframe>
		</div>
		<DIV style="WIDTH: 500px; position:absolute;float:left;top:25%; left:30%; z-index:999; clear:both; overflow:hidden;" id="t_div">
			<iframe style="position:absolute; left:0px; top:0px; left:0px; bottom:0px; float:left; z-index:-1; margin:0px; padding:0px;" frameborder="0" scrolling="no" width="100%" height="2000px;" class="al2" id="ifr"></iframe>
			<U class="f1"></U><U class="f2"></U><U class="f3"></U>
			<div class="d_top" onMouseDown="moveEvent(event,'t_div')">
				<span>测试弹出div</span>
				<a href="javascript:" onClick="cl('t')">×</a>
			</div>
			<DIV class="d_body" >
			CSS圆角
			</DIV>
			<div class="d_foot"></div>
			<U class="f3"></U><U class="f2"></U><U class="f1"></U>
		</DIV>
	</div>
</body>