<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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">
<title></title>
<script type="text/javascript" language="javascript">
var txt = "账号:<input type='text'size='18' id='userid' onblur='check(this.id)'><span id='spuserid'>请输入用户名</span><br/>密码:<input type='password' id='pwd'><span>请输入用 密码</span>";
function check(objID) {
var obj = document.getElementById(objID).value;
if (obj == "")
document.getElementById("spuserid").style.color = "red";
}
function sAlert() //sAlert函数 参数为txt
{
var shield = document.createElement("DIV");
//创建遮罩层对象<div>
shield.id = "shield"; //设定<div>的ID即 <div id="shield">
shield.style.position = "absolute"; //<div>的position定位为绝对定位
shield.style.left = "0px"; //<div>左点为0
shield.style.top = "0px"; //<div>上点为0
shield.style.width = "100%"; //<div>宽度为100%
shield.style.height = "100%"; //<div>高度为body的滚动高度
shield.style.background = "#333"; //<div>背景色为#333
shield.style.textAlign = "center"; //<div>文字居中
shield.style.zIndex = "10000"; //<div>层叠顺序 数字大的会压在数字小的上面
shield.style.filter = "alpha(opacity=0)"; //<div>滤镜透明度为0
shield.style.opacity = 0; //<div>透明度为0
//以上创造了一个<div></div>层 就是遮罩层
var alertFram = document.createElement("DIV");
//创建弹出层对象<div>
alertFram.id = "alertFram"; //设定<div>的ID即 <div id="alertFram">
alertFram.style.position = "absolute"; //<div>的position定位为绝对定位
alertFram.style.left = ((parseInt(document.documentElement.scrollWidth) / 2) - 225) + "px"; //<div>浏览器可见区域的一半在减去自身宽度的一半
alertFram.style.top = ((parseInt(document.documentElement.scrollHeight) / 2) - 75) + "px"; //<div>。。。。。 可以控制弹窗的纵向位置
alertFram.style.width = "450px"; //<div>宽度为450px 弹窗宽度
alertFram.style.height = "150px"; //<div>高度为150px 弹窗高度
alertFram.style.background = "#ccc"; //<div>背景色为#ccc
alertFram.style.textAlign = "center"; //<div>文字居中
alertFram.style.lineHeight = "150px"; //<div>行高150px
alertFram.style.zIndex = "10001"; //<div>层叠顺序 因为数字大 所有会压在shield这个<div>之上
//以上创造了一个<div></div>层 就是弹窗的层
strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;100%;border:solid 1px red\">\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;font-size:12px;height:120px;line-height:60px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;\">" + txt + "</li>\n";
strHtml += " <li style=\"background:#FDEEF4;font-weight:bold;height:25px;line-height:25px; border:1px solid #F9CADE;\"><input style='float:left;margin-left:100px' type=\"button\" value=\" 确 定 \" id=\"do_OK\" onclick=\"doOk()\" /><input type=\"button\" value=\" 取 消 \" id=\"do_Cancel\" onclick=\"doCancel()\" style='float:right;margin-right:100px'/></li>\n";
strHtml += "</ul>\n";
//以上拼接了弹窗的内容
alertFram.innerHTML = strHtml; //把内容写进弹窗
document.body.appendChild(alertFram); //添加弹窗层
document.body.appendChild(shield); //添加shield遮罩层
//这部分用来改变遮罩层的背景颜色 start
this.setOpacity = function(obj, opacity) { //构建了一个setOpacity方法 设定透明度
if (opacity >= 1) opacity = opacity / 100; //如果透明度大于1 则透明度等于原来的百分之一
try { obj.style.opacity = opacity; } catch (e) { } //try...catch测试 实现错误处理
try {
if (obj.filters.length > 0 && obj.filters("alpha")) {
obj.filters("alpha").opacity = opacity * 150; //设定滤镜透明度为原来的150倍
} else {
obj.style.filter = "alpha(opacity=\"" + (opacity * 150) + "\")"; //设定滤镜透明度为原来的150倍
}
} catch (e) { }
}
var c = 0;
this.doAlpha = function() { //构建了一个doAlpha方法 用于调整滤镜
if (++c > 20) { clearInterval(ad); return 0; } //当c大于20 停止定时器
setOpacity(shield, c); //执行setOpacity方法
}
var ad = setInterval("doAlpha()", 1); //每毫秒 执行doAlpha方法
// end
//构建了一个doOk方法 用于点击确定时移除弹出层
this.doOk = function() {
// if (window.confirm('Are You Sure To Remove The AlertFrom?')) {
document.body.removeChild(alertFram); //移除弹出层
document.body.removeChild(shield); //移除遮罩层
document.body.onselectstart = function() { return true; } //打开选择
document.body.oncontextmenu = function() { return true; } //开打右键
// } else {
// return;
// }
}
//构建了一个doCancel 点击取消按钮
this.doCancel = function() {
alert('Click the Cancel Button ');
}
}
</script>
<body>
<input type="button" value="点击这里" onclick="sAlert();" />
</body>
</html>
//-----全部代码 asp.net程序