function fnCreate(src) {
/* 要創建的div的classname */
var ClassName = "thumbviewbox" ;
if (src == '' ) {
return false ;
}
/* 優先創建圖片,如果圖片沒有加載成功,回調自己 */
var img = document.createElement('img' );
img.setAttribute( 'src', src);
//顯示圖片的大小
var imgwd = "300px" ;
var imghg = "300px" ;
if (imgwd < 1) {
var timer = setTimeout("fnCreate('" + src + "')", 100);
return false ;
} else {
clearInterval(timer);
}
/* 清除已經彈出的窗口,防止冒泡 */
em = document.getElementsByClassName(ClassName)
for (var i = em.length - 1; i >= 0; i--) {
var p = em[i];
p.parentNode.removeChild(p);
}
/* 各項參數 */
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;z-index:9999;' );
document.body.appendChild(element);
}