这篇文章分享用javascript写弹窗的方法
每个弹窗的标识
var x =0;
var idzt = new array();
var window = function(config){
id不重复
  idzt[x] = zhuti+x;  弹窗id
初始化，接收参数
  this.config = {
     width : config.width || 300, 宽度
     height : config.height || 200, 高度
     buttons : config.buttons || '', 默认无按钮
     title : config.title || '标题', 标题
     content : config.content || '内容', 内容
     ismask : config.ismask == false?false:config.ismask || true, 是否遮罩
     isdrag : config.isdrag == false?false:config.isdrag || true, 是否移动
     };
加载弹出窗口
  var w = ($(window).width()-this.config.width)/2;
  var h = ($(window).height()-this.config.height)/2;
var nr = <p class='zhuti' id='"+idzt[x]+"' bs='"+x+"' style='width:"+this.config.width+"px; height:"+this.config.height+"px; left:"+w+"px; top:"+h+"px;'></p>;
  $(body).append(nr);
加载弹窗标题
  var content =<p id='title"+x+"' class='title' bs='"+x+"'>+this.config.title+<p id='close"+x+"' class='close' bs='"+x+"'>×</p></p>;
  加载弹窗内容
  var nrh = this.config.height - 75;
  content = content+<p id='content"+x+"' bs='"+x+"' class='content' style='width:100%; height:"+nrh+"px;'>+this.config.content+</p>;
  加载按钮
  content = content+<p id='btnx"+x+"' bs='"+x+"' class='btnx'>+this.config.buttons+</p>;
将标题、内容及按钮添加进窗口
  $('#'+idzt[x]).html(content);
创建遮罩层
  if(this.config.ismask)
  {
     var zz = <p id='zz'></p>;
     $(body).append(zz);
     $(#zz).css('display','block');
  }
最大最小限制，以免移动到页面外
  var maxx = $(window).width()-this.config.width;
  var maxy = $(window).height()-this.config.height;
  var minx = 0,
     miny = 0;
窗口移动
  if(this.config.isdrag)
  {
     鼠标移动弹出窗
     $(.title).bind(mousedown,function(e){
var n = $(this).attr(bs); 取标识
使选中的到最上层
           $(.zhuti).css(z-index,3);
           $('#'+idzt[n]).css(z-index,4);
取初始坐标
           var endx = 0, 移动后x坐标
              endy = 0, 移动后y坐标
              startx = parseint($('#'+idzt[n]).css(left)), 弹出层的初始x坐标
              starty = parseint($('#'+idzt[n]).css(top)), 弹出层的初始y坐标
              downx = e.clientx, 鼠标按下时，鼠标的x坐标
              downy = e.clienty; 鼠标按下时，鼠标的y坐标
绑定鼠标移动事件
           $(body).bind(mousemove,function(es){
endx = es.clientx - downx + startx; x坐标移动
              endy = es.clienty - downy + starty; y坐标移动
最大最小限制
              if(endx > maxx)
              {
                 endx = maxx;
              } else if(endx < 0)
{
endx = 0;
}
if(endy > maxy)
              {
                 endy = maxy;
              } else if(endy < 0)
              {
                 endy = 0;
              }
$('#'+idzt[n]).css(top,endy+px);
              $('#'+idzt[n]).css(left,endx+px);
window.getselection ? window.getselection().removeallranges():document.selection.empty(); //取消选中文本
});
        });
     鼠标按键抬起，释放移动事件
     $(body).bind(mouseup,function(){
$(body).unbind(mousemove);
});
  }
关闭窗口
  $(.close).click(function(){
var m = this.getattribute(bs); 找标识
        $('#'+idzt[m]).remove(); 移除弹窗
        $('#zz').remove(); 移除遮罩
})
x++;  标识增加
}
以上就是用javascript写弹窗的方法的详细内容。