AJAX弹出提示信息改变背景色效果

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>提示信息框</title>
<style type="text/css">
a{ color:#000; font-size:12px;text-decoration:none}
a:hover{ color:#900; text-decoration:underline}
body{background:;filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#003366); overflow:hidden}
#massage_box{ position:absolute; left:expression((body.clientWidth-350)/2); top:expression((body.clientHeight-200)/2); width:350px; height:200px;filter:dropshadow(color=#666666,offx=3,offy=3,positive=2); z-index:2; visibility:hidden}
#mask{ position:absolute; top:0; left:0; width:expression(body.scrollWidth); height:expression(body.scrollHeight); background:#666; filter:ALPHA(opacity=60); z-index:1; visibility:hidden}
.massage{border:#036 solid; border-width:1 1 3 1; width:95%; height:95%; background:#fff; color:#036; font-size:12px; line-height:150%}
.header{background:#036; height:10%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:3 5 0 5; color:#fff}
</style>
<!--实现层移动-->
<script language="javascript">
var Obj=''
document.onmouseup=MUp
document.onmousemove=MMove

function MDown(Object){
Obj=Object.id
document.all(Obj).setCapture()
pX=event.x-document.all(Obj).style.pixelLeft;
pY=event.y-document.all(Obj).style.pixelTop;
}

function MMove(){
if(Obj!=''){
  document.all(Obj).style.left=event.x-pX;
  document.all(Obj).style.top=event.y-pY;
  }
}

function MUp(){
if(Obj!=''){
  document.all(Obj).releaseCapture();
  Obj='';
  }
}
</script>
</head><body>
<div id="massage_box"><div class="massage">
<div class="header" onmousedown=MDown(massage_box)><div style="display:inline; width:150px; position:absolute">本站提示信息</div>
<span onClick="massage_box.style.visibility='hidden'; mask.style.visibility='hidden'" style="float:right; display:inline; cursor:hand">×</span></div>
<ul style="margin-right:25"><li>
本人申明此博客所有文章（包括文章插图）均为原创，如需引用或转载请注明出处。 
</li><li>欢迎大家对博文中观点留言评述，谢绝无聊人士无素质无观点的灌水漫骂。</li><li>本站已设背景音乐，听音乐盒中收集的音乐时请先到页面底部关闭背景音乐。</li></ul></div></div>
<div id="mask"></div>
<span onClick="mask.style.visibility='visible';massage_box.style.visibility='visible'" style="cursor:hand"><a href="#">显示提示信息</a></span>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>bottom here
</body>
</html>

一种弹出提示信息时页面背景色调改变的方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta content="all" name="robots" />
<title>Dialog</title>
<script type="text/javascript">
<!--
if(window.Event && navigator.userAgent.indexOf("Opera") == -1){
  window.constructor.prototype.__defineGetter__("event", function(){
    var o = arguments.callee;
    while((o = o.caller) != null){
      var e = o.arguments[0];
      if(e && (e.constructor == Event || e.constructor == MouseEvent)) return e;
    }
    return null;
  });
  Event.prototype.__defineGetter__("srcElement",function(){
    var node=this.target;
    while(node.nodeType!=1)node=node.parentNode;
    return node;
  });
  Event.prototype.__defineGetter__("offsetX",function(){
    return this.layerX;
  });
  Event.prototype.__defineGetter__("offsetY",function(){
    return this.layerY;
  });
}
if(window.HTMLElement && navigator.userAgent.indexOf("Opera") == -1){
  HTMLElement.prototype.insertAdjacentElement=function(where,parsedNode){
    switch(where.toLowerCase()){
      case "beforebegin":
        this.parentNode.insertBefore(parsedNode,this);
        break;
      case "afterbegin":
        this.insertBefore(parsedNode,this.firstChild);
        break;
      case "beforeend":
        this.appendChild(parsedNode);
        break;
      case "afterend":
        if(this.nextSibling)
          this.parentNode.insertBefore(parsedNode,this.nextSibling);
        else
          this.parentNode.appendChild(parsedNode);
        break;
      }
    }
  HTMLElement.prototype.insertAdjacentHTML=function(where,htmlStr){
    var r=this.ownerDocument.createRange();
    r.setStartBefore(this);
    var parsedHTML=r.createContextualFragment(htmlStr);
    this.insertAdjacentElement(where,parsedHTML);
    }
}
var Dialog = {
  Instances : 0,
  IDialog : function (){
    this.Width = 400;
    this.Height = 280;
    this.Left = 0;
    this.Top = 0;
    this.Right = 0;
    this.Bottom = 0;
    this.Window = "Dialog";
    this.Title = "Dialog";
    this.Content = "";
    this.IsModal = true;
    this.Moveable = true;
    this.Buttons = "<input type=\"button\" value=\"确定\" onclick=\"Dialog.Event.Close()\" \/> <input type=\"button\" value=\"取消\" onclick=\"Dialog.Event.Close()\" \/>";
    this.Render = function(){
      var shtml =  "<div id=\"DialogWindow\" style=\"position:absolute;left:" + this.Left + "px;top:" + this.Top + "px;width:" + this.Width + "px;height:" + this.Height + "px;z-index:10000;\" oncontextmenu=\"return false;\">"  +"\n"+
  "  <div style=\"background:green;height:20px;padding:2px;line-height:20px;font-weight:bold;cursor:move;color:#fff\" onselectstart=\"return false;\" onmousedown=\"Dialog.Event.MouseDown()\" onmousemove=\"Dialog.Event.MouseMove()\" onmouseup=\"Dialog.Event.MouseUp()\">"  +"\n"+
  "    <span style=\"float:right;border:1px solid #fff;font:9px verdana;width:12px;height:12px;text-align:center;margin:3px;cursor:default\" onmouseover=\"this.style.borderColor=\'black\';this.style.color=\'black\'\" onmouseout=\"this.style.borderColor=\'white\';this.style.color=\'white\'\" onclick=\"Dialog.Event.Close()\">X<\/span>"  +"\n"+
  "    <span style=\"width:" + (this.Width-12) + "px;\">" + this.Title + "<\/span>"  +"\n"+
  "  <\/div>"  +"\n"+
  "  <div style=\"border:1px solid #dedede;background:white;height:" + (this.Height - 22) + "px;padding:2px;cursor:move\">"  +"\n"+
  "    <div style=\"width:100%;height:100%;margin:0 1px 1px;cursor:default\">" + this.Content + "<\/div>"  +"\n"+
  "  <\/div>"  +"\n"+
  "  <div style=\"text-align:center;background-color:#fff\">" +this.Buttons + "<\/div>"  +"\n"+
  "<\/div>";
      document.body.insertAdjacentHTML("BeforeEnd", shtml);
    }
    this.Open = function(){
      if(arguments > 0){
        this.Parse(arguments[0]);
      }
      if(arguments > 1 && typeof(arguments[1]) == "string") this.Window = arguments[1];
    }
    this.Close = function(){
    }
    this.Parse = function(featrues){
      if(features){
        if(typeof(featrues) == "string" && /:=,/g.test(featrues)){
          var params = featrues.split(/,\s*/);
          var len = params.length;
          var nameValue;
          for(var i=0;i<len;i++){
            nameValue = params[i].split(/\s*[:=]\s*/);
            if(nameValue.length != 2 || nameValue[0].length < 3)continue;
            nameValue[0] = nameValue[0].substr(0, 1).toUpperCase() + nameValue[0].substr(1).toLowerCase();
            this[nameValue[0]] = nameValue[1];
          }
        } else if(typeof(featrues) == "object"){
          var e;
          for(e in featrues){
            if(e.length > 2) this[e[0].substr(0, 1).toUpperCase() + e.substr(1).toLowerCase()] = featrues[e];
          }
        }
        
      }
    }
    this.Mask = function(){
      if(!document.getElementById("__Dialog__Mask_Layer")){
        var mask = document.createElement("div");
        with(mask){
          id = "__Dialog__Mask_Layer";
          with(style){
            position = "absolute";
            left = "0px";
            top = "0px";
            width = "100%";
            height = (document.all&&navigator.appVersion.replace(/^.+?MSIE\s+(\d).+$/, "$1") == "6")?Dialog.Util.Document().clientHeight:"100%";
            background = "green";
            if(document.all && navigator.userAgent.indexOf("Opera") == -1) filter = "alpha(opacity=20)";
            else if(navigator.userAgent.indexOf("Opera") == -1) opacity = ".2";
            else background = "transparent url(alpha80.png) left top repeat";
            zIndex = "9999";
          }
          oncontextmenu = function(){return false;};
        }
        document.body.appendChild(mask);
      }
    }
    this.toString = function(){
      return "[Object Dialog]";
    }
    Dialog.IDialog.prototype.Show = function(){
      if(this.IsModal) this.Mask();
      document.body.style.overflow = "hidden";
      document.documentElement.style.overflow = "hidden";
      this.Left = (parseInt(Dialog.Util.Document().clientWidth) - this.Width)/2;
      this.Top = (parseInt(this.IsModal?document.getElementById("__Dialog__Mask_Layer").clientHeight:Dialog.Util.Document().clientHeight) - this.Height)/2;
      this.Render();
    }
    Dialog.IDialog.prototype.Move = function(){//for override test
      this.Left +=10;
    }
  },
  ModalDialog : function(){
    Dialog.IDialog.apply(this, arguments);
    this.Move = function(){//for override test
      Dialog.IDialog.prototype.Move.apply(this, arguments);
      this.Left ++;
    }
    this.Show = function(){
      Dialog.IDialog.prototype.Show.apply(this, arguments);
    }
    this.toString = function(){
      return "[Object ModalDialog]";
    }
  },
  ModelessDialog : function(){
    Dialog.IDialog.apply(this, arguments);
    this.IsModal = false;
    this.Show = function(){
      Dialog.IDialog.prototype.Show.apply(this, arguments);
    }
    this.toString = function(){
      return "[Object ModelessDialog]";
    }
  },
  Alert : function(){
    Dialog.IDialog.apply(this, arguments);
    this.Title = "消息提示框";
    this.Buttons = "<input type=\"button\" value=\"确定\" onclick=\"Dialog.Event.Close()\" \/>";
    this.Show = function(){
      Dialog.IDialog.prototype.Show.apply(this, arguments);
    }
    this.toString = function(){
      return "[Object AlertDialog]";
    }
  },
  Confirm : function(){
    Dialog.IDialog.apply(this, arguments);
    this.Title = "消息确认框";
    this.Show = function(){
      Dialog.IDialog.prototype.Show.apply(this, arguments);
    }
    this.toString = function(){
      return "[Object ConfirmDialog]";
    }
  },
  Prompt : function(){
    Dialog.IDialog.apply(this, arguments);
    this.Height = 80;
    this.Title = "消息输入框";
    this.Content = "请输入×××：<br /><input type='text' id='__DialogWindow__Confirm__' value='abc' style='width:98%' />";
    this.Show = function(){
      Dialog.IDialog.prototype.Show.apply(this, arguments);
    }
    this.toString = function(){
      return "[Object PromptDialog]";
    }
  },
  Event : {
    offsetX : 0,
    offsetY : 0,
    isMouseDown : false,
    MouseDown : function(){
      Dialog.Event.isMouseDown = true;
      Dialog.Event.offsetX = event.offsetX;
      Dialog.Event.offsetY = event.offsetY;
      window.status = [event.offsetX,event.offsetY];
      Dialog.Util.SetCapture(event.srcElement);
    },
    MouseMove : function(){
      if(Dialog.Event.isMouseDown == true){
        var o = Dialog.Util.CaptureObject(event.srcElement);
        if(o == document.getElementById("__Dialog__Mask_Layer"))return false;
        with(o.style){
          try{
            left = (parseInt(event.clientX?event.clientX:event.pageX) - parseInt(Dialog.Event.offsetX)) + "px";
            top = (parseInt(event.clientY?event.clientY:event.pageY) - parseInt(Dialog.Event.offsetY)) + "px";
          }catch(e){}
        }
      }
    },
    MouseUp : function(){
      Dialog.Event.isMouseDown = false;
      Dialog.Util.ReleaseCapture(event.srcElement);
    },
    Close : function(){
      document.getElementById("__Dialog__Mask_Layer").style.display = "none";
      document.getElementById("DialogWindow").style.display = "none";
      document.body.style.overflow = "auto";
      document.documentElement.style.overflow = "auto";
    },
    Click : function(){
    }
  },
  Util : {
    CaptureObject : function(o){
      //while(o.parentNode && o.tagName.toLowerCase() != "body") o = o.parentNode;
      return document.getElementById("DialogWindow");
    },
    SetCapture : function(o){
      if(o.setCapture) o.setCapture();
      else if(o.captureEvents)o.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    },
    ReleaseCapture : function(o){
      if(o.releaseCapture) o.releaseCapture();
      else if(o.releaseEvents)o.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    },
    Document : function(){
      return document.documentElement.clientHeight > 0?document.documentElement : document.body;
    }
  },
  toString : function(){return "[Object Dialog]\nby wfsr@msn.com";}
}
//-->
</script>
<style type="text/css">
 <!--
 body,td{font:normal 12px Verdana;color:#333333}
 input,textarea,select,td{font:normal 12px Verdana;color:#333333;border:1px solid #999999;background:#ffffff}
 table{border-collapse:collapse;width:100%}
 td{padding:3px}
 input{height:20px;}
 textarea{width:80%;height:50px;overflow:auto;}
 form{display:inline}
 img {border:0}
-->
 </style>
</head>
<body>
<script type="text/javascript">
<!--
document.write(new Array(100).join("s<br>"))
var md = new Dialog.Confirm();
md.Title = "欢迎测试Dialog v1.0";
md.Content = "本窗口为友情提示内容。";
md.Show();
-->
</script>
</body>
</html>

Asp教程

通过asp实例结合结合ACCESS,MSSQL来更好的深入Asp学习 - 爬坡者

导航

2007-10-9 22:49:41

Tags: AJAX实例应用

发布:asp教程 | 分类:AJAX例子 | 评论:1 | 引用:0 | 浏览:

最新评论及回复

最近发表

Powered By Z-Blog 1.8 Spirit Build 80710

Copyright 2007-2008 papozhe.com [asp教程] All Rights Reserved.
浙ICP备07030537号
免责申明：所有文章除特别声明，均来自网上，主要为学习用！内容仅供参考，版权归原作者。如侵犯您利益，请来信告知.
Email:papozhe$Gmail.com QQ:76336503

Asp教程

通过asp实例结合结合ACCESS,MSSQL来更好的深入Asp学习 - 爬坡者

导航

2007-10-9 22:49:41

AJAX弹出提示信息改变背景色效果

Tags: AJAX实例应用

发布:asp教程 | 分类:AJAX例子 | 评论:1 | 引用:0 | 浏览: strBatchCount+="spn538=538,"

最新评论及回复

最近发表

Powered By Z-Blog 1.8 Spirit Build 80710

发布:asp教程 | 分类:AJAX例子 | 评论:1 | 引用:0 | 浏览: