關(guān)jQuery彈出窗口簡(jiǎn)單實(shí)現(xiàn)代碼-javascript編程

　　今天講了Jquery的彈出窗口的組成和用法：

　　先把引用文件的代碼寫好：

　　// 每個(gè)彈窗的標(biāo)識(shí)var x =0;var idzt = new Array();var Window = function(config){//ID不重復(fù)idzt[x] = "zhuti"+x; //彈窗ID//初始化，接收參數(shù)this.config = {width : config.width || 300, //寬度height : config.height || 200, //高度buttons : config.buttons || '', //默認(rèn)無(wú)按鈕title : config.title || '標(biāo)題', //標(biāo)題content : config.content || '內(nèi)容', //內(nèi)容isMask : config.isMask == falsefalse:config.isMask || true, //是否遮罩isDrag : config.isDrag == falsefalse:config.isDrag || true, //是否移動(dòng)};//加載彈出窗口var w = ($(window).width()-this.config.width)/2;var h = ($(window).height()-this.config.height)/2;var nr = "

　　";$("body").append(nr);//加載彈窗標(biāo)題var content ="

　　"+this.config.title+"

　　×

　　";//加載彈窗內(nèi)容var nrh = this.config.height - 75;content = content+"

　　"+this.config.content+"

　　";//加載按鈕content = content+"

　　"+this.config.buttons+"

　　";//將標(biāo)題、內(nèi)容及按鈕添加進(jìn)窗口$('#'+idzt[x]).html(content);//創(chuàng)建遮罩層if(this.config.isMask){var zz = "

　　";$("body").append(zz);$("#zz").css('display','block');}//最大最小限制，以免移動(dòng)到頁(yè)面外var maxX = $(window).width()-this.config.width;var maxY = $(window).height()-this.config.height;var minX = 0,minY = 0;//窗口移動(dòng)if(this.config.isDrag){//鼠標(biāo)移動(dòng)彈出窗$(".title").bind("mousedown",function(e){var n = $(this).attr("bs"); //取標(biāo)識(shí)//使選中的到最上層$(".zhuti").css("z-index",3);$('#'+idzt[n]).css("z-index",4);//取初始坐標(biāo)var endX = 0, //移動(dòng)后X坐標(biāo)endY = 0, //移動(dòng)后Y坐標(biāo)startX = parseInt($('#'+idzt[n]).css("left")), //彈出層的初始X坐標(biāo)startY = parseInt($('#'+idzt[n]).css("top")), //彈出層的初始Y坐標(biāo)downX = e.clientX, //鼠標(biāo)按下時(shí)，鼠標(biāo)的X坐標(biāo)downY = e.clientY; //鼠標(biāo)按下時(shí)，鼠標(biāo)的Y坐標(biāo)//綁定鼠標(biāo)移動(dòng)事件$("body").bind("mousemove",function(es){endX = es.clientX - downX + startX; //X坐標(biāo)移動(dòng)end

【關(guān)jQuery彈出窗口簡(jiǎn)單實(shí)現(xiàn)代碼-javascript編程】相關(guān)文章：

數(shù)控編程代碼大全02-13

如何調(diào)試javascript腳本呢07-19

javascript跨域訪問的方法07-19

Java代碼的基本知識(shí)09-03

PHP Socket編程過程02-09

網(wǎng)頁(yè)滾動(dòng)文字的制作HTML代碼04-10

數(shù)控機(jī)床編程步驟11-08

進(jìn)口報(bào)關(guān)與清關(guān)的區(qū)別03-31

2016年嵌入式QT編程小技巧07-16

計(jì)算機(jī)編程常用英語(yǔ)詞匯11-21