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

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

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

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

　　// 每个弹窗的标识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 == falsefalse:config.isMask || true, //是否遮罩isDrag : config.isDrag == falsefalse:config.isDrag || true, //是否移动};//加载弹出窗口var w = ($(window).width()-this.config.width)/2;var h = ($(window).height()-this.config.height)/2;var nr = "

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

　　"+this.config.title+"

　　×

　　";//加载弹窗内容var nrh = this.config.height - 75;content = content+"

　　"+this.config.content+"

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

　　"+this.config.buttons+"

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

　　";$("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坐标移动end

【关jQuery弹出窗口简单实现代码-javascript编程】相关文章：

JavaScript实现网页刷新代码段03-25

关于ASP.NET使用JavaScript显示信息提示窗口实现原理及代码03-30

常用排序算法之JavaScript实现代码段03-10

jquery提交按钮的代码03-30

浅析jQuery 遍历函数javascript03-29

高效编写JavaScript代码的技巧03-10

在Java中执行JavaScript代码04-01

基于jQuery的固定表格头部的代码03-30

javascript编程异常处理的方法03-31