- 相關推薦
關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
jquery提交按鈕的代碼03-30
高效編寫JavaScript代碼的技巧03-10
在Java中執行JavaScript代碼04-01
基于jQuery的固定表格頭部的代碼03-30
javascript編程異常處理的方法03-31