Wkwebkit源代碼

其實網上有很多這樣的代碼，但都有弊端。原理很簡單，就是顯示隱藏層，控制z-index。但是這個控件不足以控制100%的高度，樣式不美觀，不支持拖動。

我這裏有個代碼，妳可以研究壹下。

& lt腳本& gt

Vardragdrop = function(拖動區域，移動區域){//拖動。

this . drag area = drag area；

this . move area = move area；

this.xdom = null

this.mask = null//阻止iframe

this . x = 0；

this . y = 0；

this . dbsw = top . document . scroll width；

this . dbsh = top . document . scroll height；

this . init()；

};

dragDrop.prototype = {

GetPosition:function(){//獲取元素坐標。例如，如果元素或其上級元素設置了position relative，則它應該是getpos(子元素)。y-getpos(父元素)。y.

return document . documentelement . getboundingclientrect & amp；& amp函數(o){//IE，FF，Opera

var pos = o.getBoundingClientRect()，root = o . owner document | | o . document；

返回{ x:pos . left+root . document element . scroll left，y:pos . top+root . document element . scroll top }；

} || function(o){//Safari，Chrome，Netscape，Mozilla

var x = 0，y = 0；

do { x+= o . offset left；y+= o . offsettop；} while((o = o . offset parent))；

return {'x':x，' y ':y }；

};

}(),

setPos:function(obj，x，y){

obj . style . left = x+" px "；

obj . style . top = y+" px "；

mDown:函數(e){

var isWK =(/apple WebKit/I . test(navigator . appversion . replace(/\ s/g，' ')))；

var pos = this . get position(this . move area)；

this.x = (isWK)？e . offsetx:(e . clientx-pos . x)；

this.y = (isWK)？e . offsety:(e . clienty-pos . y)；

pos = null

if(this . drag area . set capture){ this . drag area . set capture()；} else { e . prevent default()；}

this . mask . style . left = this . xdom . parent node . scroll left+' px '；

this . mask . style . top = this . xdom . parent node . scroll top+' px '；

this . mask . style . display = ' block '；

this . xdom . onmousemove = this . mmove . bind(this)；

this . xdom . onmouseup = this . MUP . bind(this)；

mMove:函數(e){

this . drag area . style . cursor = " move "；

e = e | | window.event

var MX =(e . clientx-this . x)；

var my =(e . clienty-this . y)；

var rx = this . xdom . offsetwidth-this . movearea . offsetwidth；

var ry = this . xdom . offset height-this . move area . offset height；

MX =(MX & lt；=0)?0:(MX & gt；=rx)？rx:MX；

my =(my & lt；=0)?0:(我的& gt=ry)？ry:我的；

this.setPos(this.moveArea，mx，my)；

mUp:功能(e){

this . drag area . style . cursor = " default "；

e = e | | window.event

var MX =(e . clientx-this . x)；

var my =(e . clienty-this . y)；

var rx = this . xdom . offsetwidth-this . movearea . offsetwidth；

var ry = this . xdom . offset height-this . move area . offset height；

MX =(MX & lt；=0)?0:(MX & gt；=rx)？rx:MX；

my =(my & lt；=0)?0:(我的& gt=ry)？ry:我的；

this.setPos(this.moveArea，mx，my)；

if(this . drag area . release capture){ this . drag area . release capture()；}

this . mask . style . display = ' none '；

this . xdom . onmousemove = function(){ }；

this . xdom . onmouseup = function(){ }；

init:函數(){

if(function . prototype . bind = = undefined){

function . prototype . bind = function(obj){

var owner = this，args = array . prototype . slice . call(arguments)，call obj = array . prototype . shift . call(args)；

返回函數(e){ e = e | | top . window . event | | window . event；owner.apply(callobj，[e].concat(args))；}

};

}

var ieop = (/(？:Microsoft | opera)/I . test(navigator . appname))；

var xDom =(window . top . document = = document)？document:(window . top . document . body . tagname！='BODY ')？文檔:window . top . document；

this . xdom =(window . top . document = = document)？document . BODY:(window . top . document . BODY . tagname = = ' BODY ')？window.top.document.body:(ieop)？document . body:window . top . document . document element；

var xdoc = xdom . createdocumentfragment()；

this . mask = xdom . createelement(' div ')；

this . mask . style . CSS text = ' display:none；位置:絕對；左:0；top:0；寬度:110%；身高:110%；溢出:隱藏；背景:# 000；-moz-opacity:0；不透明度:0；濾鏡:alpha(不透明度= 0)；z索引:9999；'；

xdoc . appendchild(this . mask)；

this . xdom . appendchild(xdoc)；

xDom = xdoc = null

this . move area . style . position = " absolute "；

this . move area . style . zindex = 10000；

this . drag area . onmousedown = this . mdown . bind(this)；

}

};

Var mask tips = function (width，height) {//Mask提示框。

this.width = width | | 500

this.height = height | | 400

this.xdom = null

this.mask = null

this.ifr = null

this.layer = null

this.title = null

this.content = null

this.isOpen = false

this . init()；

};

maskTips.prototype = {

getStyle:function(dom，stylename){

if(dom.currentStyle){

返回DOM . current style[style name]；

}否則{

返回window.getComputedStyle(dom，null)。getPropertyValue(style name)；

}

打開:功能(寬度、高度){

var xdom = this . xdom . document element；xelm = this . xdom . body；width = width | | this.widthheight = height | | this.height

xdom . style . width = ' 100% '；xdom . style . height = ' 100% '；xdom . style . overflow = ' hidden '；

xelm . style . width = ' 100% '；xelm . style . height = ' 100% '；xelm . style . overflow = ' hidden '；

this . IFR . style . left = xdom . scroll left+' px '；

this . IFR . style . top = xdom . scroll top+' px '；

this . IFR . style . display = ' block '；

this . mask . style . left = xdom . scroll left+' px '；

this . mask . style . top = xdom . scroll top+' px '；

this . mask . style . display = ' block '；

this . content . style . width = width-10+' px '；

this . content . style . height = height-40+' px '；

var left = xdom . scroll left+xdom . offsetwidth/2-(width/2)+' px '；

var top = xdom . scroll top+this . mask . offset height/2-(height/1.8)+' px '；

this . layer . style . width = width+' px '；

this . layer . style . height = height+' px '；

this . layer . style . left = left；

this . layer . style . top = top；

this . layer . style . display = ' block '；

this.isOpen = true

hide:function(){

this . layer . style . display = ' none '；

this . mask . style . display = ' none '；

this . IFR . style . display = ' none '；

var xdom = this . xdom . document element，xelm = this . xdom . body；

xdom . style . width = ' auto '；xdom . style . height = ' auto '；xdom . style . overflow = ' auto '；

xelm . style . width = ' auto '；xelm . style . height = ' auto '；xelm . style . overflow = ' auto '；

this.isOpen = false

init:函數(){

var CSS mask = ' display:none；位置:絕對；左:0；top:0；寬度:110%；身高:110%；溢出:隱藏；背景:# 000；-moz-不透明度:0.6；不透明度:0.6；濾鏡:alpha(不透明度= 60)；z指數:101；邊框:無；'；

var cssIfr = ' display:none；位置:絕對；左:0；top:0；寬度:110%；身高:110%；溢出:隱藏；背景:# fff-moz-opacity:0；不透明度:0；濾鏡:alpha(不透明度= 0)；z指數:100；邊框:無；'；

var CSS layer = ' display:none；位置:絕對；左:0；top:0；寬度:“+this . width+”px；高度:'+this . height+' px；溢出:隱藏；縮放:1；背景:白色；邊框:5px solid # dddz指數:102；填充:0；'；

var ieop = (/(？:Microsoft | opera)/I . test(navigator . appname))；

var xDom =(window . top . document = = document)？document:(window . top . document . body . tagname！='BODY ')？文檔:window . top . document；

var xElm =(window . top . document = = document)？document . BODY:(window . top . document . BODY . tagname = = ' BODY ')？window.top.document.body:(ieop)？document . body:window . top . document . document element；

this.xdom = xDom

var xdoc = xdom . createdocumentfragment()；

this . mask = xdom . createelement(' div ')；

this . IFR = xdom . createelement(' iframe ')；

this . layer = xdom . createelement(' div ')；

xdoc . appendchild(this . IFR)；

xdoc . appendchild(this . mask)；

xdoc . appendchild(this . layer)；

this . layer . innerhtml = ' & lt；div style = " height:30px；背景:# ddd文本對齊:右對齊；溢出:隱藏；縮放:1；"& gt& ltH3 style = " float:left；邊距:0；填充:0；font-size:12px；"& gt上傳後請點擊關閉按鈕

this . mask . style . CSS text = CSS mask；

this . IFR . style . CSS text = CSS IFR；

this . layer . style . CSS text = CSS layer；

this . title = this . layer . child nodes[0]。child nodes[0]；

this . content = this . layer . child nodes[1]；

new dragDrop(this . layer . child nodes[0]，this . layer)；

this . layer . getelementsbytagname(' button ')[0]。onclick =(function(o){ return function(){ o . hide()} })(這個)；

window . settimeout(function(){ xelm . appendchild(xdoc))；xDom = xElm = xdoc = null});

}

};

var x =新面具(300，200)；

函數openDiv(){