jquery傻瓜基础教程之教你如何制作简单的dialog插件

很多朋友都在跃跃欲试 打算打造自己的jquery插件，
我是 烦透了了jquery ui的dialog插件，所以突发奇想 自己写一个。先申明 就是随便这么一写，太多的还没有完善，之所以贴出来就是给大家一个参考。

下面大家跟我一起打造一个jquery  dialog插件

首先创建一个插件

$.fn.dialog=function(){

}

下面我们首先考虑 当您要现实的信息弹出来的时候，文档上面有一个遮罩层是必需的

那我们来编写一个遮罩层
$.fn.dialog=function(){

  this.MaskDiv=function()
       {
      
       var wnd = $(window), doc = $(document);
       //alert(doc.height());
       if(wnd.height() > doc.height()){  //当高度少于一屏
        wHeight = wnd.height(); 
       }else{//当高度大于一屏
        wHeight = doc.height();  
       }
       //创建遮罩背景
       $("body").append("<div ID=MaskID></div>");
       $("body").find("#MaskID").width(wnd.width()).height(wHeight)
       .css({position:"absolute",top:"0px",left:"0px",background:"#ccc",filter:"Alpha(opacity=90);",opacity:"0.3",zIndex:"10000"});
       }

}

注：这个遮罩函数 也不怎么复杂，这里我就不过多的讲解了，有不懂的加群 来问

遮罩做好以后 我们就需要来写 信息提示显示的位置了，下面我们在写一个 显示位置的函数。

$.fn.dialog=function(){

  this.MaskDiv=function()
       {
      
       var wnd = $(window), doc = $(document);
       //alert(doc.height());
       if(wnd.height() > doc.height()){  //当高度少于一屏
        wHeight = wnd.height(); 
       }else{//当高度大于一屏
        wHeight = doc.height();  
       }
       //创建遮罩背景
       $("body").append("<div ID=MaskID></div>");
       $("body").find("#MaskID").width(wnd.width()).height(wHeight)
       .css({position:"absolute",top:"0px",left:"0px",background:"#ccc",filter:"Alpha(opacity=90);",opacity:"0.3",zIndex:"10000"});
       }
  this.sPosition=function(obj)
       {
      var MyDiv_w = parseInt(obj.width());
      var MyDiv_h = parseInt(obj.height());
     
      var width =parseInt($(document).width());
      var height = parseInt($(window).height());
      var left = parseInt($(document).scrollLeft());
      var top = parseInt($(document).scrollTop());

      var Div_topposition = top + (height / 2) - (MyDiv_h / 2); //计算上边距
      var Div_leftposition = left + (width / 2) - (MyDiv_w / 2); //计算左边距
      return Array(Div_topposition,Div_leftposition);
       }

}

我们这里主要是让信息显示在中间

完整代码：

$.fn.dialog=function(){

  this.MaskDiv=function()
       {
      
       var wnd = $(window), doc = $(document);
       //alert(doc.height());
       if(wnd.height() > doc.height()){  //当高度少于一屏
        wHeight = wnd.height(); 
       }else{//当高度大于一屏
        wHeight = doc.height();  
       }
       //创建遮罩背景
       $("body").append("<div ID=MaskID></div>");
       $("body").find("#MaskID").width(wnd.width()).height(wHeight)
       .css({position:"absolute",top:"0px",left:"0px",background:"#ccc",filter:"Alpha(opacity=90);",opacity:"0.3",zIndex:"10000"});
       }
  this.sPosition=function(obj)
       {
      var MyDiv_w = parseInt(obj.width());
      var MyDiv_h = parseInt(obj.height());
     
      var width =parseInt($(document).width());
      var height = parseInt($(window).height());
      var left = parseInt($(document).scrollLeft());
      var top = parseInt($(document).scrollTop());

      var Div_topposition = top + (height / 2) - (MyDiv_h / 2); //计算上边距
      var Div_leftposition = left + (width / 2) - (MyDiv_w / 2); //计算左边距
      return Array(Div_topposition,Div_leftposition);
       }
     this.MaskDiv();
        $("body").append("<div ID=DivDialog style='display:none'><ul><li>提示</li></ul></div>");
  var obj=$("body").find("#DivDialog");
  obj.width("200px").height("200px");
  PosT=this.sPosition(obj);
        obj.css({position:"absolute",top:PosT[0]+"px",left:PosT[1]+"px",background:"#FFCC66",zIndex:"10001"}).show("slow");
  return this;
}

演示地址：http://www.cnjquery.com/demo/dialog.html