做了一个自定义的alter提示框啦（初学）

小小菜鸟，自己学习心得，记录下来，勿见笑

拷贝了别人，其实也可以根据js把这个html结构画下来了，挺简单的

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SaveMessage.aspx.cs" Inherits="SaveMessage" %>

<!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 runat="server">
<title>无标题页</title>

   this.m_text=str;
   this.m_caption=caption;
   this.m_width=200;
   this.m_height=70;
   this.m_wait=1000;
   this.m_fade=500;
   this.m_bordercolor="#336699";
   this.m_titlecolor="#99ccff";
   var msgw,msgh,bordercolor;
   msgw=m_width;//提示窗口的宽度
   msgh=m_height;//提示窗口的高度
   titleheight=25 //提示窗口标题高度
   bordercolor=m_bordercolor;//提示窗口的边框颜色
   titlecolor=m_titlecolor;//提示窗口的标题颜色

   var swidth,sheight;
   swidth=document.body.offsetWidth;
   sheight=document.body.offsetHeight;
   if (sheight<screen.height)
   {
    sheight=screen.height;
   }
   // //此处可以添加一个背景，防止多次点击保存按钮
   // if(bgobj==undefined){
   // var bgobj=document.createElement("div");
   // }
   // bgobj.setAttribute('id','bgdiv');
   // bgobj.style.position="absolute";
   // bgobj.style.top="0";
   // bgobj.style.background="#777";
   // 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);
   if(msgobj==null){
   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 = "-115px" ;
msgobj.style.marginTop = -115+document.documentElement.scrollTop+"px";
msgobj.style.width = msgw + "px";
msgobj.style.height =msgh + "px";
msgobj.style.textAlign = "center";
msgobj.style.lineHeight = (msgh-titleheight-20) + "px";
msgobj.style.zIndex = "10001";
if(title==null){
     var title=document.createElement("h4");
}
     title.setAttribute("id","msgtitle");
     title.setAttribute("align","left");
     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(){
//disappear();

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

$("#msgdiv").draggable({handle:'#msgtitle'});   //配合easyui

this.fadeout=function(){
$("#bgdiv").fadeOut(1000);
$("#msgdiv").fadeOut(1000);
$("#msgtitle").fadeOut(1000,function(){disappear()});
window.parent.location.href=caption;//自己加的一个跳转了，必要时候可以用咯
}
setTimeout("fadeout()",1000);
};

</script>

</head>
<body>
    <form id="form1" runat="server">
    <div style="text-align: center; text-shadow: 1">
        <input id="Button1" type="button" value="保存" onclick="alert('保存成功','http://www.baidu.com')" />
    </div>
    </form>
</body>
</html>

posted on 2013-05-29 15:44 sutton 阅读(796) 评论(0) 收藏举报