网站首页 语言 会计 电脑 医学 资格证 职场 文艺体育 范文

关jQuery弹出窗口简单实现代码-javascript编程

栏目: 网页设计 / 发布于: / 人气:2.8W

今天讲了Jquery的`弹出窗口的组成和用法:

关jQuery弹出窗口简单实现代码-javascript编程

先把引用文件的代码写好:

// 每个弹窗的标识var x =0;var idzt = new Array();var Window = function(config){//ID不重复idzt[x] = "zhuti"+x; //弹窗ID//初始化,接收参数ig = {width : h || 300, //宽度height : ht || 200, //高度buttons : ons || '', //默认无按钮title : e || '标题', //标题content : ent || '内容', //内容isMask : sk == falsefalse:sk || true, //是否遮罩isDrag : ag == falsefalse:ag || true, //是否移动};//加载弹出窗口var w = ($(window)h()h)/2;var h = ($(window)ht()ht)/2;var nr = "

";$("body")nd(nr);//加载弹窗标题var content ="

"+e+"

×

";//加载弹窗内容var nrh = ht - 75;content = content+"

"+ent+"

";//加载按钮content = content+"

"+ons+"

";//将标题、内容及按钮添加进窗口$('#'+idzt[x])(content);//创建遮罩层if(sk){var zz = "

";$("body")nd(zz);$("#zz")('display','block');}//最大最小限制,以免移动到页面外var maxX = $(window)h()h;var maxY = $(window)ht()ht;var minX = 0,minY = 0;//窗口移动if(ag){//鼠标移动弹出窗$("e")("mousedown",function(e){var n = $(this)("bs"); //取标识//使选中的到最上层$("i")("z-index",3);$('#'+idzt[n])("z-index",4);//取初始坐标var endX = 0, //移动后X坐标endY = 0, //移动后Y坐标startX = parseInt($('#'+idzt[n])("left")), //弹出层的初始X坐标startY = parseInt($('#'+idzt[n])("top")), //弹出层的初始Y坐标downX = ntX, //鼠标按下时,鼠标的X坐标downY = ntY; //鼠标按下时,鼠标的Y坐标//绑定鼠标移动事件$("body")("mousemove",function(es){endX = ntX - downX + startX; //X坐标移动end