當前位置:才華齋>設計>網頁設計>

關jQuery彈出視窗簡單實現程式碼-javascript程式設計

網頁設計 閱讀(2.73W)

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