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

转自：http://space.itpub.net/14734416/viewspace-474627

很多朋友都在跃跃欲试 打算打造自己的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 bj=$("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