糯米文學吧

位置:首頁 > 設計 > 網頁設計

關jQuery彈出窗口簡單實現代碼-javascript編程

今天講了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