模拟Dialog

最新推荐文章于 2019-01-21 14:46:00 发布
最新推荐文章于 2019-01-21 14:46:00 发布
阅读量761 收藏
点赞数
分类专栏： javascript 文章标签： dialog function button null properties class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/danier_sky/article/details/4702836
版权

<!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="Content-Type" content="text/html; charset=gb2312" />
<title>Dialog</title>
<style 本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/wtcsy/archive/2009/06/04/4242471.aspxtype="text/css">
.dialogcontainter{height:400px; width:400px; border:1px solid #14495f; position:absolute; font-size:13px;}
.dialogtitle{height:26px; width:auto; background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090603/103444839.p.gif');}
.dialogtitleinfo{float:left;height:20px; margin-top:2px; margin-left:10px;line-height:20px; vertical-align:middle; color:#FFFFFF; font-weight:bold; }
.dialogtitleico{float:right; height:20px;  width:21px; margin-top:2px; margin-right:5px;text-align:center; line-height:20px; vertical-align:middle; background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090603/103419495.p.gif');background-position:-21px 0px}
.dialogbody{ padding:10px; width:auto; background-color: #FFFFFF;}
.dialogbottom{
        bottom:1px; right:1px;cursor:nw-resize;
        position:absolute;
  background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090603/103419495.p.gif');
  background-position:-42px -10px;
        width:10px;
        height:10px;
        font-size:0;}
</style>
</head>
<body >
<input value="创建" type="button" οnclick="creat()" />
<div id='aa'></div>
<script>
var z=1,i=1,left=10
var isIE = (document.all) ? true : false;

var $ = function (id) {
 return  document.getElementById(id);
};

var Extend = function(destination, source) {
 for (var property in source) {
  destination[property] = source[property];
 }
}

var Bind = function(object, fun,args) {
 return function() {
  return fun.apply(object,args||[]);
 }
}

var BindAsEventListener = function(object, fun) {
 var args = Array.prototype.slice.call(arguments).slice(2);
 return function(event) {
  return fun.apply(object, [event || window.event].concat(args));
 }
}

var CurrentStyle = function(element){
 return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}

 function create(elm,parent,fn){var element = document.createElement(elm);fn&&fn(element); parent&&parent.appendChild(element);return element};
 function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)};
 function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)};

 var Class = function(properties){
       var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
       _class.prototype = properties;
       return _class;
 };

var Dialog = new Class({
 options:{
  Width       : 400,
  Height      : 400,
  Left        : 100,
  Top         : 100,
  Titleheight : 26,
  Minwidth    : 200,
  Minheight   : 200,
  CancelIco   : true,
  ResizeIco   : false,
  Info        : "新闻标题",
  Content     : "无内容",
  Zindex      : 2
 },
 initialize:function(options){
  this._dragobj   = null;
  this._resize    = null;
  this._cancel    = null;
  this._body      = null;
  this._x         = 0;
  this._y         = 0;
  this._fM        = BindAsEventListener(this, this.Move);
  this._fS        = Bind(this, this.Stop);
  this._isdrag    = null;
  this._Css       = null;

  this.Width      = this.options.Width;
  this.Height     = this.options.Height;
  this.Left       = this.options.Left;
  this.Top        = this.options.Top;
  this.CancelIco  = this.options.CancelIco;
  this.Info       = this.options.Info;
  this.Content    = this.options.Content;
  this.Minwidth   = this.options.Minwidth;
  this.Minheight  = this.options.Minheight;
  this.Titleheight= this.options.Titleheight;
  this.Zindex     = this.options.Zindex;
  Extend(this,options);
  Dialog.Zindex   = this.Zindex
  构造dialog
  var obj = ['dialogcontainter','dialogtitle','dialogtitleinfo','dialogtitleico','dialogbody','dialogbottom'];
  for(var i = 0;i<obj.length;i++)
  { obj[i]=create('div',null,function(elm){elm.className = obj[i];}); }
  obj[2].innerHTML = this.Info;
  obj[4].innerHTML = this.Content;
  obj[1].appendChild(obj[2]);
  obj[1].appendChild(obj[3]);
  obj[0].appendChild(obj[1]);
  obj[0].appendChild(obj[4]);
  obj[0].appendChild(obj[5]);
  document.body.appendChild(obj[0]);
  this._dragobj = obj[0];
  this._resize  = obj[5];
  this._cancel  = obj[3];
  this._body    = obj[4];
o,x1,x2
设置Dialog的长 宽 ,left ,top
  with(this._dragobj.style){
   height = this.Height + "px";top = this.Top + "px";width = this.Width +"px";left = this.Left + "px";zIndex = this.Zindex;
  }
  this._body.style.height    = this.Height - this.Titleheight-parseInt(CurrentStyle(this._body).paddingLeft)*2+'px';
///   添加事件
  addListener(this._dragobj,'mousedown',BindAsEventListener(this, this.Start,true));
  addListener(this._cancel,'mouseover',Bind(this,this.Changebg,[this._cancel,'0px 0px','-21px 0px']));
  addListener(this._cancel,'mouseout',Bind(this,this.Changebg,[this._cancel,'0px 0px','-21px 0px']));
  addListener(this._cancel,'mousedown',BindAsEventListener(this,this.Disappear));
  addListener(this._body,'mousedown',BindAsEventListener(this, this.Cancelbubble));
  addListener(this._resize,'mousedown',BindAsEventListener(this, this.Start,false));
 },
 Disappear:function(e){
  this.Cancelbubble(e);
  document.body.removeChild(this._dragobj);
 },
 Cancelbubble:function(e){
   this._dragobj.style.zIndex = ++Dialog.Zindex;
   document.all?(e.cancelBubble=true):(e.stopPropagation())
 },
 Changebg:function(o,x1,x2){
  o.style.backgroundPosition =(o.style.backgroundPosition==x1)?x2:x1;
 },
 Start:function(e,isdrag){
   if(!isdrag){this.Cancelbubble(e);}
   this._Css = isdrag?{x:"left",y:"top"}:{x:"width",y:"height"}
   this._dragobj.style.zIndex = ++Dialog.Zindex;
   this._isdrag = isdrag;
   this._x      = isdrag?(e.clientX - this._dragobj.offsetLeft||0):(this._dragobj.offsetLeft||0) ;
   this._y      = isdrag?(e.clientY - this._dragobj.offsetTop ||0):(this._dragobj.offsetTop||0);
   if(isIE)
   {
     addListener(this._dragobj, "losecapture", this._fS);
     this._dragobj.setCapture();
   }
   else
   {
     e.preventDefault();
     addListener(window, "blur", this._fS);
   }
   addListener(document,'mousemove',this._fM)
   addListener(document,'mouseup',this._fS)
 },
 Move:function(e){
   window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
   var i_x = e.clientX - this._x, i_y = e.clientY - this._y;
   this._dragobj.style[this._Css.x] = (this._isdrag?Math.max(i_x,0):Math.max(i_x,this.Minwidth))+'px';
   this._dragobj.style[this._Css.y] = (this._isdrag?Math.max(i_y,0):Math.max(i_y,this.Minheight))+'px'
   if(!this._isdrag)
   this._body.style.height = Math.max(i_y -this.Titleheight,this.Minheight-this.Titleheight)-2*parseInt(CurrentStyle(this._body).paddingLeft)+'px';
 },
 Stop:function(){
   removeListener(document,'mousemove',this._fM);
   removeListener(document,'mouseup',this._fS);
   if(isIE)
   {
   removeListener(this._dragobj, "losecapture", this._fS);
   this._dragobj.releaseCapture();
   }
     else
   {
   removeListener(window, "blur", this._fS);
   };
  }
})
  new Dialog({Width:300,Height:300,Left:300,Top:300});
  new Dialog({Info:"人族",Content:"人族很强吗?"});
 
  function creat(){
   new Dialog({Info:title="标题"+i,Left:300+left,Top:300+left,Content:'内容'+i,Zindex:(++Dialog.Zindex)});
      i++;left +=10;
  }

</script>
</body>
</html>

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/danier_sky/archive/2009/10/20/4702836.aspx

 

<!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="Content-Type" content="text/html; charset=gb2312" />
<title>Dialog</title>
<style type="text/css">
.div{margin-top:3px !important;margin-top:18px;}
.input{ height:15px; width:250px; border:1px solid #296BC5; margin-top:10px;float:left}
.btn { height:21px; width:68px;zoom:1; display:inline-block !important; *display:inline;; cursor:pointer; margin:3px; margin-top:8px;}
.btnleft{height:21px; width:4px; background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090605/140833261.p.gif'); float:left}
.btnmiddle{height:21px; width:60px; background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090605/140833261.p.gif'); background-position:0px -21px;float:left; text-align:center; line-height:21px; vertical-align:middle}
.btnright{height:21px; width:4px; background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090605/140833261.p.gif'); background-position:0px -42px;float:left;}
.btnleft1{height:21px; width:4px; background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090605/140833261.p.gif'); float:left; background-position:0px -399px;}
.btnmiddle1{height:21px; width:60px; background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090605/140833261.p.gif'); background-position:0px -420px;float:left; text-align:center; line-height:21px; vertical-align:middle}
.btnright1{height:21px; width:4px; background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090605/140833261.p.gif'); background-position:0px -441px;float:left;}
.bgdiv{border:1px dotted #333333;}
.bgdiv1{background-color:#666666;filter:alpha(opacity=30);opacity:0.3; }
.dialogcontainter{height:400px; width:400px; border:1px solid #14495f; position:absolute; font-size:13px; padding:1px; padding-bottom:2px; background-color:#94D6FF}
.dialogtitle{height:24px; width:auto; background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090605/140833261.p.gif');background-position:0px -350px; border:1px solid #52A5F7; border-bottom:none}
.dialogtitleinfo{float:left;height:20px; margin-top:2px; margin-left:5px;line-height:20px; vertical-align:middle; color:#FFFFFF; font-weight:bold; }
.dialogtitleico1{float:right; height:16px;  width:16px; margin-top:3px; margin-right:3px;text-align:center; line-height:20px; vertical-align:middle; background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090605/140820620.p.gif');background-position:-144px -16px}
.dialogtitleico{float:right; height:16px;  width:16px; margin-top:3px; margin-right:3px;text-align:center; line-height:20px; vertical-align:middle; background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090605/140820620.p.gif');background-position:-160px 0px}
.dialogbody{ padding:10px; width:auto; background-color: #FFFFFF; border:1px solid #52A5F7; border-top:none; background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090607/175033292.p.gif); background-repeat:repeat-x}
.dialogbottom{
        bottom:1px; right:1px;cursor:nw-resize;
        position:absolute;
  background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090605/140820620.p.gif');
  background-position:-32px -158px;
        width:10px;
        height:10px;
        font-size:0;}
</style>
</head>
<body style="font-size:12px;">
<script>

var isIE = (document.all) ? true : false;
var isIE6 = isIE && ([/MSIE (/d)/.0/i.exec(navigator.userAgent)][0][1] == 6);
var $ = function (id) {
 return  document.getElementById(id);
};

var Extend = function(destination, source) {
 for (var property in source) {
  destination[property] = source[property];
 }
}

var Bind = function(object, fun,args) {
 return function() {
  return fun.apply(object,args||[]);
 }
}

var BindAsEventListener = function(object, fun) {
 var args = Array.prototype.slice.call(arguments).slice(2);
 return function(event) {
  return fun.apply(object, [event || window.event].concat(args));
 }
}

var CurrentStyle = function(element){
 return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}
 function pagerange(){
  return {width:Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth),height:Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)}
 }
 function create(elm,parent,fn){var element = document.createElement(elm);fn&&fn(element); parent&&parent.appendChild(element);return element};
 function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)};
 function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)};

 var Class = function(properties){
       var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
       _class.prototype = properties;
       return _class;
 };

var Dialog = new Class({
 options:{
  Width       : 400,
  Height      : 400,
  Left        : 100,
  Top         : 100,
  Titleheight : 24,
  Noscroll    : false,
  Minwidth    : 150,
  Minheight   : 150,
  Maxright    : 9999,
  Maxbottom   : 9999,
  HideIco     : true,
  CancelIco   : true,
  ResizeIco   : false,
  Info        : "新闻标题",
  Content     : "无内容",
  Zindex      : 2,
  Customdiv   : false,
  Customstyle : null,
  Customobj   : null,
  Onstart     : function(){},
  Onstop      : function(){},
  Ondisappear : function(){}
 },
 initialize:function(options){
  this._dragobj   = null;
  this._resize    = null;
  this._body      = null;
  this._hide      = null;
  this._x         = 0;
  this._y         = 0;
  this._fM        = BindAsEventListener(this, this.Move);
  this._fS        = Bind(this, this.Stop);
  this._isdrag    = null;
  this._Css       = null;
  this.Padding    = null;

  this.Width      = this.options.Width;
  this.Height     = this.options.Height;
  this.Left       = this.options.Left;
  this.Top        = this.options.Top;
  this.CancelIco  = this.options.CancelIco;
  this.Info       = this.options.Info;
  this.Content    = this.options.Content;
  this.Minwidth   = this.options.Minwidth;
  this.Minheight  = this.options.Minheight;
  this.Titleheight= this.options.Titleheight;
  this.Zindex     = this.options.Zindex;
  this.Customdiv  = this.options.Customdiv;
  this.Customobj  = this.options.Customobj;
  this.Customstyle= this.options.Customstyle;
  this.Noscroll   = this.options.Noscroll;
  this.Maxright   = this.options.Maxright;
  this.Maxbottom  = this.options.Maxbottom;
  this.HideIco    = this.options.HideIco;
  this.Ondisappear= this.options.Ondisappear
  Extend(this,options||{});
  Dialog.Zindex   = this.Zindex
 
  var obj = ['dialogcontainter','dialogtitle','dialogtitleinfo','dialogtitleico','dialogbody','dialogbottom','dialogtitleico1'];
  for(var i = 0;i<obj.length;i++)
  { obj[i]=create('div',null,function(elm){elm.className = obj[i];}); }
  obj[2].innerHTML = this.Info;
  obj[4].innerHTML = this.Content;
  obj[1].appendChild(obj[2]);
  obj[1].appendChild(obj[3]);
  if(this.HideIco)obj[1].appendChild(obj[6]);
  obj[0].appendChild(obj[1]);
  obj[0].appendChild(obj[4]);
  obj[0].appendChild(obj[5]);
  document.body.appendChild(obj[0]);
  this._dragobj = obj[0];
  this._resize  = obj[5];
  this._body    = obj[4];
  this._hide    = obj[6];
o,x1,x2
设置Dialog的长 宽 ,left ,top
  with(this._dragobj.style){
   height = this.Height + "px";top = this.Top + "px";width = this.Width +"px";left = this.Left + "px";zIndex = this.Zindex;
  }
  this.Padding = parseInt(CurrentStyle(this._body).paddingLeft)
  this._body.style.height    = this.Height - this.Titleheight-this.Padding*2+'px';
/// 
  addListener(this._dragobj,'mousedown',BindAsEventListener(this, this.Start,true));
  addListener(obj[3],'mousedown',BindAsEventListener(this,this.Disappear));
  addListener(this._hide,'mousedown',BindAsEventListener(this, this.Hide));
  addListener(this._body,'mousedown',BindAsEventListener(this, this.Show));
  addListener(this._resize,'mousedown',BindAsEventListener(this, this.Start,false));
 },
 Hide:function(e){
  document.all?(e.cancelBubble=true):(e.stopPropagation())
  this._dragobj.style.height = "auto";
  this._resize.style.display=this._body.style.display   = CurrentStyle(this._body).display=="none"?"block":"none";
  this._hide.style.backgroundPosition = CurrentStyle(this._hide).backgroundPosition=="-160px -16px"?"-144px -16px":"-160px -16px";
 },
 Disappear:function(){
  document.body.removeChild(this._dragobj);
  this.Ondisappear();
 },
 Show:function(e){
   this._dragobj.style.zIndex = ++Dialog.Zindex;
   document.all?(e.cancelBubble=true):(e.stopPropagation())
 },
 Start:function(e,isdrag){
   !isdrag&&(document.all?(e.cancelBubble=true):(e.stopPropagation()))
   this._Css = isdrag?{x:"left",y:"top"}:{x:"width",y:"height"};
   this._isdrag = isdrag;
   var self = this;
   this._dragobj.style.zIndex = ++Dialog.Zindex;
   this.Noscroll&&(this.Maxright  = pagerange().width - this._dragobj.offsetWidth)&&(this.Maxbottom = pagerange().height - this._dragobj.offsetHeight);
   this._x      = isdrag?(e.clientX - this._dragobj.offsetLeft||0):(this._dragobj.offsetLeft||0) ;
   this._y      = isdrag?(e.clientY - this._dragobj.offsetTop ||0):(this._dragobj.offsetTop||0);
   this.Customdiv&&create('div',document.body,function(elm){
     self.Customobj = elm;
     with(elm){
      //var p = self.Getobjpos(self._dragobj,);
      className=self.Customstyle;
      style.width=self._dragobj.offsetWidth+'px';style.height=self._dragobj.offsetHeight+'px';
      style.left=self.Getobjpos(self._dragobj,1)+'px';style.top=self.Getobjpos(self._dragobj)+'px';
      style.zIndex = ++Dialog.Zindex;
      style.position="absolute";
     }   
    })
   if(isIE)
   {
     addListener(this._dragobj, "losecapture", this._fS);
     this._dragobj.setCapture();
   }
   else
   {
     e.preventDefault();
     addListener(window, "blur", this._fS);
   }
   addListener(document,'mousemove',this._fM);
   addListener(document,'mouseup',this._fS);
 },
 Getobjpos:function(el,left){
        var val = 0;
        while (el !=null) {
            val += el["offset" + (left? "Left": "Top")];
   el = el.offsetParent;
        }
        return val;
 },
 Move:function(e){
   window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
   var i_x = e.clientX - this._x, i_y = e.clientY - this._y;
   var obj = this.Customdiv?this.Customobj:this._dragobj;
   obj.style[this._Css.x] = (this._isdrag?Math.min(Math.max(i_x,0),this.Maxright):Math.max(i_x,this.Minwidth))+'px';
   obj.style[this._Css.y] = (this._isdrag?Math.min(Math.max(i_y,0),this.Maxbottom):Math.max(i_y,this.Minheight))+'px'
   if(!this._isdrag&&!this.Customdiv)
   this._body.style.height = Math.max(i_y -this.Titleheight-this.Padding*2,this.Minheight-this.Titleheight-this.Padding*2)+'px';
 },
 Stop:function(){
  if(this.Customdiv)
  {
   this._dragobj.style[this._Css.x] = (this._isdrag?parseInt(CurrentStyle(this.Customobj).left):Math.max(parseInt(CurrentStyle(this.Customobj).width),this.Minwidth)) + 'px';
   this._dragobj.style[this._Css.y] = (this._isdrag?parseInt(CurrentStyle(this.Customobj).top):Math.max(parseInt(CurrentStyle(this.Customobj).height),this.Minheight)) + 'px';
   if(!this._isdrag)
   this._body.style.height    = Math.max(parseInt(CurrentStyle(this.Customobj).height) -this.Titleheight,this.Minheight-this.Titleheight)-this.Padding*2+'px';
   document.body.removeChild(this.Customobj);  
  }
  removeListener(document,'mousemove',this._fM);
  removeListener(document,'mouseup',this._fS);
  if(isIE)
  {
     removeListener(this._dragobj, "losecapture", this._fS);
     this._dragobj.releaseCapture();
     }
       else
        {
        removeListener(window, "blur", this._fS);
     };
 }
});
 var LightBox = new Class({
  options:{
    Obj      : null,
   Color    : "#fff",
   Opacity  : 50,
   zIndex   : 1000
  },
  initialize:function(options){
   this.Obj     = this.options.Obj;
   this.Color   = this.options.Color;
   this.Opacity = this.options.Opacity;
   this.zIndex  = this.options.zIndex;
   Extend(this, options || {});
   this.Obj     = this.Obj||document.body.insertBefore(document.createElement("div"), document.body.childNodes[0])
   ///据说document.body.appendChild()导致IE已终止操作bug
      with(this.Obj.style){
   display = "none"; zIndex = this.zIndex; left = top = "0px"; position = "fixed"; width = height = "100%";
   };
  if(isIE6){
   this.Obj.style.position = "absolute";
   this._resize = Bind(this, function(){
   this.Obj.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
   this.Obj.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px"
     });
  }
  this.Obj.innerHTML = '<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>';   
  },
  Show:function() {
     var self = this;
  if(isIE6){ this._resize(); addListener(window,"resize", self._resize); }
  with(this.Obj.style){
   isIE ? filter = "alpha(opacity:" + this.Opacity + ")" : opacity = this.Opacity / 100;
   backgroundColor = this.Color; display = "block";
  }; 
     },
  Close: function() {
  this.Obj.style.display = "none";
     }
 });
var Button = new Class({
    options:{
  Text   : "确定"
 },
 initialize:function(options){
  this.obj   = null;
  this.Text  = this.options.Text;
  Extend(this,options||{});
  var arr    = ["btn","btnleft","btnmiddle","btnright"];
  var i      = arr.length;
  for(;i>-1;i--)
  { arr[i] = create('div',null,function(elm){with(elm){elm.className = arr[i]}})}
     this.obj   = arr[0];
     this.obj.appendChild(arr[1]);this.obj.appendChild(arr[2]);this.obj.appendChild(arr[3]);
  arr[2].innerHTML = this.Text;
  addListener(this.obj,'mouseover',Bind(this,this.Changebg)); 
  addListener(this.obj,'mouseout',Bind(this,this.Changebg)) ;  
   },
   Changebg:function(){
        var divs = this.obj.getElementsByTagName('div')
  divs[1].className=divs[1].className == "btnmiddle"?"btnmiddle1":"btnmiddle";
  divs[2].className=divs[2].className == "btnright"?"btnright1":"btnright";
  divs[0].className=divs[0].className == "btnleft"?"btnleft1":"btnleft";
   }
})


  new Dialog({Info:"标题1",Content:"无样式的拖动,限制范围",Noscroll:true});
  new Dialog({Info:"标题2",Content:"拖动框为虚线",Customdiv:true,Customstyle:'bgdiv',Width:300,Height:300,Left:250,Top:250});
  new Dialog({Info:"标题3",Content:"拖动框透明层",Customdiv:true,Customstyle:'bgdiv1',Left:300,Top:300});
 
var Box = new LightBox({Color:"#666666",Opacity:10,zIndex:5});

var Alert_btn = new Button({Text:'Alert'})
document.body.appendChild(Alert_btn.obj)
addListener(Alert_btn.obj,'click',ale);

var Confirm_btn = new Button({Text:'Confirm'})
document.body.appendChild(Confirm_btn.obj)
addListener(Confirm_btn.obj,'click',Confirm);

var Prompt_btn = new Button({Text:'Prompt'})
document.body.appendChild(Prompt_btn.obj)
addListener(Prompt_btn.obj,'click',Prompt);
function ale(){
     var Alert = new Dialog({Info:"alert",Noscroll:true,Width:300,Height:100,Zindex:++Dialog.Zindex,HideIco:false,Alert:function(){
  this._body.style.color ='#296BC5';
  this._dragobj.style.zIndex  = ++Dialog.Zindex;
  this._resize.style.display  = "none";
  this._dragobj.style.textAlign  = "center";
  this._dragobj.style.left = document.documentElement.clientWidth/2 -this._dragobj.offsetWidth/2 +'px'
  this._dragobj.style.top  = document.documentElement.clientHeight/2 -this._dragobj.offsetHeight/2 +'px'
  this._body.innerHTML     = "<div class='div'>你好啊<div>" ;},Ondisappear:function(){Box.Close();},Button:new Button()})
  Box.Obj.style.zIndex = Dialog.Zindex;
  Alert.Alert();
  Box.Show();
  Alert._body.appendChild(Alert.Button.obj);
  addListener(Alert.Button.obj,'click',function(){Alert.Disappear()})
}

function Confirm(){
  var Confirm = new Dialog({Info:"Confirm",Noscroll:true,Width:300,Height:100,Zindex:++Dialog.Zindex,HideIco:false,Confirm:function(){
  this._body.style.color ='#296BC5';
  this._dragobj.style.zIndex  = ++Dialog.Zindex;
  this._resize.style.display  = "none";
  this._dragobj.style.textAlign  = "center";
  this._dragobj.style.left = document.documentElement.clientWidth/2 -this._dragobj.offsetWidth/2 +'px'
  this._dragobj.style.top  = document.documentElement.clientHeight/2 -this._dragobj.offsetHeight/2 +'px'
  this._body.innerHTML     = "<div class='div'>多重影分身之术</div>" ;},Ondisappear:function(){Box.Close();},Button_D:new Button(),Button_C:new Button({Text:"取消"})})
  Box.Obj.style.zIndex = Dialog.Zindex;
  Box.Show();
  Confirm.Confirm();
  Confirm._body.appendChild(Confirm.Button_D.obj);
  Confirm._body.appendChild(Confirm.Button_C.obj);
  addListener(Confirm.Button_D.obj,'click',function(){Confirm.Disappear()})
  addListener(Confirm.Button_C.obj,'click',function(){Confirm.Disappear()})
}

function Prompt(){
  var Prompt = new Dialog({Info:"Prompt",Noscroll:true,Width:320,Height:120,Zindex:++Dialog.Zindex,HideIco:false,Prompt:function(){
  this._body.style.color ='#296BC5';
  this._dragobj.style.zIndex  = ++Dialog.Zindex;
  this._resize.style.display  = "none";
  this._dragobj.style.textAlign  = "right";
  this._dragobj.style.left = document.documentElement.clientWidth/2 -this._dragobj.offsetWidth/2 +'px'
  this._dragobj.style.top  = document.documentElement.clientHeight/2 -this._dragobj.offsetHeight/2 +'px'
  this._body.innerHTML     = "<div style='float:left'>请输入你的大名！~</div><input class='input'><br>" ;},Ondisappear:function(){Box.Close();},Button_D:new Button(),Button_C:new Button({Text:"取消"})})
  Box.Obj.style.zIndex = Dialog.Zindex;
  Box.Show();
  Prompt.Prompt();
  Prompt._body.appendChild(Prompt.Button_D.obj);
  Prompt._body.appendChild(Prompt.Button_C.obj);
  addListener(Prompt.Button_D.obj,'click',function(){Prompt.Disappear()})
  addListener(Prompt.Button_C.obj,'click',function(){Prompt.Disappear()})
}
</script>
</body>
</html>


本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/wtcsy/archive/2009/06/04/4242471.aspx

 

danier_sky
关注
专栏目录
模拟dialog效果
dunyanan1的专栏
03-28 625
open 文本框中的内容 $(function(){ //注册对话框 $("#dialog").dialog({ autoOpen:false , //设置对话框的打开方式不是自动打开 show:'blind', //打开时的动画效果 hide:'explode', //关闭时的动画效果 mo
Android开发dialog内存泄露,DialogFragmen引起的内存泄露
weixin_33304896的博客
05-28 1399
一、简介DialogFragment是Android3.0之后引入的一种特殊的Fragment，官方建议使用DialogFragment代替Dialog或者AllertDialog来实现弹框的功能，因为它可以更好的管理Dialog的生命周期以及可以更好复用。二、使用中遇到内存泄露在使用过程中，由于业务需要对DialogFragment的dismiss事件进行了监听，在DialogFragment展...
div模拟的showmodeldialog
06-10
div模拟的showmodeldialog 可以设置弹出窗体的高度,宽度,位置.弹出窗体的名称.等
showModalDialog 模拟 prompt
x27631022的专栏
10-12 739
最近做东西的时候由于用到了PROMPT,但是这个实在太难看了,在CSDN里面转了一大圈但是都只说用showModalDialog模拟一个，没有实在的例子，于是自己做了一个，呵呵感觉不差 。废话少说，先看演示,包括2个文件文件一 222.htmHTML>HEAD>TITLE>showModalDialog实例-qq：55802492-作者：西瓜太狼TITLE>script languag
window.showModalDialog模拟prompt对话框
chlx2008的专栏
09-06 978
因为prompt对话框在IE里一直漂在左上角，也调不了，写了一个模拟的对话框，实现弹出对话框给用户输入数据。为不涉及具体的业务内容，代码进行了简化。A.jsp只给出了js部分。a.jsp:
JS模拟Dialog弹出浮动框效果代码
10-23
标题中提到的“JS模拟Dialog弹出浮动框效果代码”，描述了通过JavaScript实现一个可拖动的弹出窗口，这种窗口可以用于创建登录框或者后台管理界面中的弹出对话框。这种技术在网页开发中非常常见，用于增强用户交互...
javascript实现的弹出层背景置灰-模拟(easyui dialog)
12-10
页面比较丑，只把功能实现了。^ ^ 代码如下: <title>模仿easyui dialog的效果</title>... //如果有，先删除原来的 if (getElement(dialogId)) { document.removeChild(getElement(dialogId))
模拟prompt
weixin_30399871的博客
01-11 180
1 <!DOCTYPE html"> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>模拟prompt</title> 4 <script src="http://apps.bdimg.com/libs/jquer...
jQuery模拟alert confirm prompt等
11-06
通过查阅资料和网络搜索，自己整理了一下，编写了这个基于jQuery的插件，用于模仿替换系统自带的 alert、confirm、prompt等提示窗体。
Activity模拟Dialog
u013708985的专栏
11-14 497
最近收到一个需求，需要实现一个全局的dialog，这个可以通过监听activity的生命周期实现，但是显然成本太大，对性能也有不好的影响。这时候需要用activity去模拟一个dialog的功能，废话不多说，见代码： 模拟一个普通的dialog： public class PopupDialogActivity extends Activity { @Override prot...
关于JavaScript中的prompt方法
mcy478643968的专栏
04-21 7428
定义和用法prompt() 方法用于显示可提示用户进行输入的对话框。语法prompt(text,defaultText)参数描述text可选。要在对话框中显示的纯文本（而不是 HTML 格式的文本）。defaultText可选。默认的输入文本。说明如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮
javascript全面总结（可能别人看的有点乱，不过多看几遍就习惯了，每个*是一个知识点集合）
sky54521的专栏
07-22 663
<br />*<br />1.JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序<br />2.使用定时函数模仿多线程（还是模拟不了多线程的，只有执行完一个function才会去执行另外一个function）<br /> <br />*<br />1.浏览器中的JavaScript引擎是基于事件驱动的,这里的事件可看作是浏览器派给它的各种任务<br /> <1>这些任务可以源自JavaScript引擎当前执行的代码块:<br />  a.如调用set
prompt() 方法用于显示可提示用户进行输入的对话框。
paopao_2017的博客
01-19 7455
function disp_prompt() { var name=prompt("请输入您的名字","Bill Gates") if (name!=null && name!="") { document.write("你好，" + name + "！今天过得好吗？") } } 点击打开链接
bootbox自定义dialog、confirm、alert样式，以及基本设置方法setDefaults中可用参数
热门推荐
zh921112的专栏
11-26 10万+
bootbox自定义dialog、confirm、alert样式，基本全局设置方法setDefaults .btn-myStyle{ background-color: #2c3e50; color:#fff} .btn-myStyle:hover,.btn-myStyle:focus{color:#fff;text-decoration: none;} 测试
js 模拟prompt弹窗，模拟阻塞
weixin_30858241的博客
01-21 941
可模拟阻塞for循环 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="btn.css"> ...
prompt弹出框中实现输入
阳光小混混的博客
04-09 2559
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;在弹出框中输入值prompt&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;script type="text/jav
artDialog提示框、对话框
zhangqifeng专栏
07-21 1万+
/**  * 警告  * @param {String} 消息内容  */ artDialog.alert = function (content, callback) { return artDialog({ id: 'Alert', icon: 'warning', fixed: true, // lock: true, width:250, height:50, c
dialog 模拟点击
最新发布
12-29
根据提供的引用内容，可以通过以下步骤来模拟点击 dialog： 1. 创建一个 FrameLayout 布局，用于显示 dialog。 2. 在 FrameLayout 中添加功能，使其能够显示和隐藏多个 dialog。 3. 为新创建的 dialog 提供注册接口，以便让 dialog 容器知道有哪些 dialog 存在。 4. 提供注销接口，以便移除不再需要弹出显示的 dialog。 5. 判断当前是否有 dialog 在显示，为主 activity 中的必要逻辑做准备。 6. 提供自定义动画的接口，以实现动态美观的效果。 通过以上步骤，可以实现模拟点击 dialog 的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值