仿js alert 弹出层提示代码

function salert(str){
   var msgw,msgh,bordercolor;
   msgw=400;//提示窗口的宽度
   msgh=100;//提示窗口的高度
   titleheight=25 //提示窗口标题高度
   bordercolor="#336699";//提示窗口的边框颜色
   titlecolor="#99ccff";//提示窗口的标题颜色
   
   var swidth,sheight;
   swidth=document.body.offsetwidth;
   sheight=document.body.offsetheight;
   if (sheight<screen.height)
   {
    sheight=screen.height;
   }

   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);
   
   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 = (msgh-titleheight) + "px";
            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);
            }

//调用方法

功能:弹出提示
   方法:调用salert("您要弹出的信息");

时间: 2024-09-10 01:59:35

仿js alert 弹出层提示代码的相关文章

漂亮的jquery提示效果(仿腾讯弹出层)_jquery

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Emula

js+div 弹出层城市切换代码

提示:您可以先修改部分代码再运行 js+div 弹出层城市切换代码 <!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>

js实现div弹出层实例代码

这个不用多说了,直接贴代码吧.代码有注释:  代码如下 复制代码 /*  * 弹出DIV层 */ function showDiv() { var Idiv     = document.getElementById("Idiv"); var mou_head = document.getElementById('mou_head'); Idiv.style.display = "block"; //以下部分要将弹出层居中显示 Idiv.style.left=(do

javascript面向对象的方式实现的弹出层效果代码_js面向对象

说到js的面向对象,就不得不提到prototype这个js内置属性了(注意:这里的prototype可不是prototype.js),它的作用就是可以动态的向一个对象(object)添加某种属性.我现在要做的就是尽可能的让代码达到公用,像继承啦之类的.好了,这些就不多说了,对prototype不了解的可以搜索下相关内容. 今天要做的是点击一个html元素让其弹出一个友好的对话框来,首先要明确两点,一点是我可能会大量的用到这种方式,甚至不希望出现系统的alert或confirm,第二点就是弹出的内

jquery制作漂亮的弹出层提示消息特效

  实现的代码. html代码:   代码如下: <div class='b'> </div> <div class='bb'> </div> <button id='go'> GO </button> <div class='message'> <div class='check'> </div> <p> Success </p> <p> Check your

jquery制作漂亮的弹出层提示消息特效_jquery

今天给大家带来一款基于jquery超炫的弹出层提示消息.这款实例页面初始时,一个go按钮.当单击go按钮时,提示强出层以动画形式出现.效果图如下: 实现的代码. html代码: 复制代码 代码如下:   <div class='b'>     </div>     <div class='bb'>     </div>     <button id='go'>         GO     </button>     <div

jquery实现可自动判断位置的弹出层效果代码_jquery

本文实例讲述了jquery实现可自动判断位置的弹出层效果代码.分享给大家供大家参考.具体如下: 这是一款jquery实现的智能弹出层效果,位置可以自适应,当层靠右边显示时自动往左移.初次运行时请按F5刷新,载入远程jQuery后才能看到效果,点击鼠标左键,弹出层将出现,在最右边点击时层自动往左移. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-auto-check-pos-alert-dlg-demo/ 具体代码如下: <!DOC

js登录弹出层特效

 点击弹出层,点击后弹出一个登录层,在这个层内的内容调用了一个示例页面  代码如下: <!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">  &l

js登录弹出层特效_javascript技巧

复制代码 代码如下: <!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> <meta http-equiv=&qu