弹出窗口 - zacard

弹出窗口

例1:
<script type="text/javascript" language="javascript">
//more javascript from http://www.smallrain.net
function sAlert(str){
var msgw,msgh,bordercolor;
msgw=400;//提示窗口的宽度
msgh=100;//提示窗口的高度
titleheight=25 //提示窗口标题高度
bordercolor="#c51100";//提示窗口的边框颜色
titlecolor="#c51100";//提示窗口的标题颜色

var sWidth,sHeight;
sWidth=screen.width;
sHeight=screen.height;

var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#cccccc";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj);

var msgObj=document.createElement("div")
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.background="white";
msgObj.style.border="1px solid " + bordercolor;
msgObj.style.position = "absolute";
msgObj.style.left = "50%";
msgObj.style.top = "50%";
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.marginLeft = "-225px" ;
msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
msgObj.style.width = msgw + "px";
msgObj.style.height =msgh + "px";
msgObj.style.textAlign = "center";
msgObj.style.lineHeight ="25px";
msgObj.style.zIndex = "10001";

   var title=document.createElement("h4");
   title.setAttribute("id","msgTitle");
   title.setAttribute("align","right");
   title.style.margin="0";
   title.style.padding="3px";
   title.style.background=bordercolor;
   title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
   title.style.opacity="0.75";
   title.style.border="1px solid " + bordercolor;
   title.style.height="18px";
   title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
   title.style.color="white";
   title.style.cursor="pointer";
   title.innerHTML="关闭";
   title.onclick=function(){
document.body.removeChild(bgObj);
document.getElementById("msgDiv").removeChild(title);
document.body.removeChild(msgObj);
}
   document.body.appendChild(msgObj);
   document.getElementById("msgDiv").appendChild(title);
   var txt=document.createElement("p");
   txt.style.margin="1em 0"
   txt.setAttribute("id","msgTxt");
   txt.innerHTML=str;
   document.getElementById("msgDiv").appendChild(txt);
}
</script>

例2:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">

<title></title>
<script type="text/javascript" language="javascript">
function __showMsg( )
{
var divMask =document.getElementById('__divMask');
var divMsg = document.getElementById('__divMsg');
var scrollHeight = document.body.scrollHeight;
var offsetHeight = document.body.offsetHeight;

divMask.style.display = "";
divMask.style.width = "100%"
divMask.style.height = (scrollHeight > offsetHeight)?scrollHeight: offsetHeight;

divMsg.style.display = "";
divMsg.style.left = document.body.scrollWidth/2 -50;
divMsg.style.top = document.body.scrollTop + offsetHeight/2-50
}

function __hiddenMsg()
{
document.getElementById('__divMsg').style.display = "none";
document.getElementById('__divMask').style.display = "none";
}

</script>
<style type="text/css">

</style>
<link rel="Stylesheet" href="../css/style.css"type="text/css" />

</head>
<body >
<div id="__divMask" style="display:none;z-index:99;filter:alpha(opacity=70);position:absolute;background-color:black">
<iframe width="100%" height="100%" style="z-index:-1; filter:alpha(opacity=0); position:absolute; TOP:0px; border-style:none;"> </iframe>
</div>
<div id="__divMsg" align="center" style="display:none;z-index:100;width:150px;position:absolute;background-color:#ffffff">
<table width="100%" border="0" cellpadding="2" cellspacing="1">
    <tr>
      <td bgColor="green" style="font-size:12px;font-weight:bold;color:#ffffff">系统提示</td>
    </tr>
    <tr>
      <td height="50" align="center" style="font-size:12px">操作成功!</td>
    </tr>
    <tr>
      <td height="25" align="center"><input type="button" onClick="__hiddenMsg()" value="确定"/></td>
    </tr>
</table>
</div>
<input type="button" name="Submit" value="按钮" onclick="__showMsg();"/>
</body>
</html>

posted on 2007-06-08 15:17 zacard 阅读(138) 评论(0) 收藏举报