75 lines
2.4 KiB
JavaScript
75 lines
2.4 KiB
JavaScript
function fnCreate(src){
|
||
|
||
/* 要创建的div的classname */
|
||
var ClassName = "thumbviewbox";
|
||
|
||
/* 清除已经弹出的窗口，防止冒泡 */
|
||
em = document.getElementsByClassName(ClassName)
|
||
|
||
for(var i=em.length-1; i>=0; i--){
|
||
var p = em[i];
|
||
p.parentNode.removeChild(p);
|
||
}
|
||
|
||
/* 优先创建图片，如果图片没有加载成功，回调自己 */
|
||
var img = document.createElement('img');
|
||
img.setAttribute('src',src);
|
||
var imgwd = img.width;
|
||
var imghg = img.height;
|
||
|
||
if(imgwd<1)
|
||
{
|
||
var timer = setTimeout("fnCreate('"+src+"')",100);
|
||
return false;
|
||
}
|
||
|
||
/* 各项参数 */
|
||
var htmlWidth = window.innerWidth; //可见区域宽度
|
||
var htmlHeight = window.innerHeight; //可见区域高度
|
||
var divleft = 0; //将要创建的div的左边距
|
||
var divtop =0; //将要创建的div的右边距
|
||
var closefunction = 'em=document.getElementsByClassName("'+ClassName+'");for(var i=em.length-1;i>=0;i--){var p=em[i];p.parentNode.removeChild(p);}'; //关闭div的代码
|
||
|
||
img.setAttribute('onclick',closefunction);
|
||
|
||
/* 计算通过图片计算div应该在的位置，保证弹窗在页面中央 */
|
||
if(imgwd>htmlWidth*0.8)
|
||
{
|
||
img.setAttribute('width',htmlWidth*0.8);
|
||
divleft=htmlWidth*0.1;
|
||
if(imghg>htmlHeight*0.8)
|
||
{
|
||
divtop = htmlHeight*0.1;
|
||
}else{
|
||
divtop = (htmlHeight-imgwd)/2;
|
||
}
|
||
}else{
|
||
img.setAttribute('width',imgwd);
|
||
divleft= (htmlWidth-imgwd)/2;
|
||
if(imghg>htmlHeight*0.8)
|
||
{
|
||
divtop = htmlHeight*0.1;
|
||
}
|
||
else
|
||
{
|
||
divtop = (htmlHeight-imgwd)/2;
|
||
}
|
||
}
|
||
|
||
/* 创建关闭按钮 */
|
||
var closebtn = document.createElement('a');
|
||
closebtn.setAttribute('class','close');
|
||
closebtn.setAttribute('href','javascript:;');
|
||
closebtn.setAttribute('style','position:absolute;top:-20px;right:-5px;cursor:pointer;background:#444;color:#FFF;');
|
||
closebtn.innerHTML = '[close/关闭]';
|
||
closebtn.setAttribute('onclick',closefunction);
|
||
|
||
/* 创建弹窗 */
|
||
var element = document.createElement('div');
|
||
element.appendChild(img);
|
||
element.appendChild(closebtn);
|
||
element.setAttribute('class',ClassName);
|
||
element.setAttribute('style','border:5px solid #444;position:absolute;top:'+Math.round(divtop)+'px;left:'+Math.round(divleft)+'px;border-radius:5px;background:#FFF');
|
||
|
||
document.body.appendChild(element);
|
||
} |