一个美化了的alert效果，非常不错。 -- [DIV+CSS]─ 深山工作室提供网络投票系统|微信公众号投票|微信公众号小程序|抖音小程序|百度小程序|微信公众号开发|企业网站建设

一个美化了的alert效果，非常不错。

蓝色理想 2008/11/13 19:31:57 admin 字体:大中小浏览 10576

以下为详细代码

<!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" xml:lang="zh-CN" lang="zh-CN">
	<head>
		<title>
			一个美化了的alert效果</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<meta http-equiv="Content-Language" content="gb2312" />
		<style type="text/css">
		 *{
		 margin:0;padding:0;
		 }
		</style>
	</head>
	<body>
	
	<div class="cecmbody" id="cecmpolicy">
		<div class="leftClass">	测试测试测试测试
						测试
						测试测试测试测试测试测试测试测试
测试测试测试测试
						测试测试测试测试测试测试测试测试	测试测试测试测试
						测试
						测试测试测试测试测试测试测试测试
测试测试测试测试
						测试测试测试测试测试测试测试测试	测试测试测试测试
						测试
						测试测试测试测试测试测试测试测试
测试测试测试测试
						测试测试测试测试测试测试测试测试	测试测试测试测试
						测试
						测试测试测试测试测试测试测试测试
测试测试测试测试
						测试测试测试测试测试测试测试测试	测试测试测试测试
						测试
						测试测试测试测试测试测试测试测试
测试测试测试测试
						测试测试测试测试测试测试测试测试	测试测试测试测试
						测试
						测试测试测试测试测试测试测试测试
测试测试测试测试
						测试测试测试测试测试测试测试测试	测试测试测试测试
						测试
						测试测试测试测试测试测试测试测试
测试测试测试测试
						测试测试测试测试测试测试测试测试
			<input type="button" value="点击这里" onclick="sAlert('我是一个渐变的sAlert',this);" />
			测试测试测试测试
						测试
						测试测试测试测试测试测试测试测试
测试测试测试测试
						测试测试测试测试测试测试测试测试
		</div>
		<div class="rightClass">
		</div>	
	</div>
				<script type="text/javascript" language="javascript">
			function sAlert(txt){
	var eSrc=(document.all)?window.event.srcElement:arguments[1];
	var shield = document.createElement("DIV");
	shield.id = "shield";
	shield.style.position = "absolute";
	shield.style.left = "0px";
	shield.style.top = "0px";
	shield.style.width = "100%";
	shield.style.height = ((document.documentElement.clientHeight>document.documentElement.scrollHeight)?document.documentElement.clientHeight:document.documentElement.scrollHeight)+"px";
	shield.style.background = "#333";
	shield.style.textAlign = "center";
	shield.style.zIndex = "10000";
	shield.style.filter = "alpha(opacity=0)";
	shield.style.opacity = 0;
	var alertFram = document.createElement("DIV");
	alertFram.id="alertFram";
	alertFram.style.position = "absolute";
	alertFram.style.left = "50%";
	alertFram.style.top = "50%";
	alertFram.style.marginLeft = "-225px" ;
	alertFram.style.marginTop = -75+document.documentElement.scrollTop+"px";
	alertFram.style.width = "450px";
	alertFram.style.height = "150px";
	alertFram.style.background = "#ccc";
	alertFram.style.textAlign = "center";
	alertFram.style.lineHeight = "150px";
	alertFram.style.zIndex = "10001";
	strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n";
	strHtml += "	<li style=\"background:#DD828D;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;\">[系统提示]</li>\n";
	strHtml += "	<li style=\"background:#fff;text-align:center;font-size:12px;height:120px;line-height:120px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;\">"+txt+"</li>\n";
	strHtml += "	<li style=\"background:#FDEEF4;text-align:center;font-weight:bold;height:25px;line-height:25px; border:1px solid #F9CADE;\"><input type=\"button\" value=\"确 定\" id=\"do_OK\" onclick=\"doOk()\" /></li>\n";
	strHtml += "</ul>\n";
	alertFram.innerHTML = strHtml;
	document.body.appendChild(alertFram);
	document.body.appendChild(shield);
	this.setOpacity = function(obj,opacity){
		if(opacity>=1)opacity=opacity/100;
		try{ obj.style.opacity=opacity; }catch(e){}
		try{ 
			if(obj.filters.length>0&&obj.filters("alpha")){
				obj.filters("alpha").opacity=opacity*100;
			}else{
				obj.style.filter="alpha(opacity=\""+(opacity*100)+"\")";
			}
		}catch(e){}
	}
	var c = 0;
	this.doAlpha = function(){
		if (++c > 20){clearInterval(ad);return 0;}
		setOpacity(shield,c);
	}
	var ad = setInterval("doAlpha()",1);
	this.doOk = function(){
		//alertFram.style.display = "none";
		//shield.style.display = "none";
		document.body.removeChild(alertFram);
		document.body.removeChild(shield);
		eSrc.focus();
		document.body.onselectstart = function(){return true;}
		document.body.oncontextmenu = function(){return true;}
	}
	document.getElementById("do_OK").focus();
	eSrc.blur();
	document.body.onselectstart = function(){return false;}
	document.body.oncontextmenu = function(){return false;}
}
		</script>
	</body>
</html>

前一页:输入框提示列表效果

后一页:另类的title提示文字

相关阅读: CSS教程:CSS伪类属性; uni-app全局载入模板与某个页面单独加载入模板写法; 超级实用且不花哨的js代码大全( 3 ); 如何购买深山旅行社管理系统？; AJAX弹出提示信息效果与lightbox效果一样; uni-app实现上拉加载，下拉刷新（下拉带动画）; asp中eof的介绍; 还在备案期间是否可以提前购买系统？

更多信息>>栏目类别选择: 百度小程序开发; 微信小程序开发; 微信公众号开发; uni-app; asp函数库; ASP; DIV+CSS; HTML; python

更多>>同类信息: jquery设置或获取修改classname; 利用css3.0写出一个音乐播放的唱片碟盘的效果; 利用css中的scale()实现放大缩小效果; 利用background-color:#000000a8在背景颜色16进制代码之后加字母加上数字让背景色透明; css背景使用base64编码或者将base64编码放在img图片标签中; 利用css3中的-webkit-font-smoothing把网页文字的毛边去掉

更多>>最新添加文章: dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT; Android移动端自动化测试：使用UIAutomatorViewer与Selenium定位元素; 抖音直播音挂载小雪花懂车帝小程序; javascript获取浏览器指纹可以用来做投票; 火狐Mozilla Firefox出现：无法载入您的Firefox配置文件它可能已经丢失或是无法访问问题解决集合处理办法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路径; python通过代码修改pip下载源让下载库飞起; python里面requests.post返回的res.text还有其它的吗

更多>>随机抽取信息: 在线支付; CSS编写过程中常见的10个错误以及解决方法; 一个可以说是超级变态,超级强的DIV+CSS应用; ASP读取json并输出; 湖南乐途旅行社; 兼容ie和火狐ff的透明度设置

更多标签热门标签

文件类型读取标语 flash 透明源码模式色彩快捷详解防止面板表达式上下左右 important 2.0 ie5.5 绝对管用的iis安装包下载单选首字母展开旅行社收藏夹 lightbox 滑动 photoshop 调色板 cpu style 长 px 眼睛忧化选择符配色项目 ResponseXML 千位性能 Google 断线多选框查找 pt 邮箱 word-spacing 载入下拉框案例光标文件夹