很多朋友都在跃跃欲试 打算打造自己的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 Div_topposition = top + (height / 2) - (MyDiv_h / 2); //计算上边距 |
