单击按钮时,我的网站将打开一个包含单个图像的窗口。如何在弹出窗口中居中放置图像
我已经得到了一切工作,而不是最后一点 - 如何将图像居中弹出?
我不是问如何居中新窗口,只是新窗口的内容。
var img = document.createElement("img");
img.src = cont.getAttribute("data-img");
img.style.boxShadow = "1px 1px 3px #333;"
//as per https://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/
img.style.position="absolute";
img.style.top= "50%";
img.style.left= "50%";
img.style.marginTop= Number((img.height/2) * - 1) + "px"; /* Half the height */
img.style.marginLeft= Number((img.width/2) * - 1) + "px"; /* Half the width */
showImage(img);
});
function showImage(imgEle) {
var w = imgEle.width + (10/100 * imgEle.width);
var h = imgEle.height+ (10/100 * imgEle.height);
var url=imgEle.getAttribute('src');
window.open(url,"Image Viewer",'width='+w+',height='+h+',resizable=1, titlebar=no, toolbar=no');
}
在新窗口显示和我的形象,上述工作是在页面的唯一的事,但图像卡在左上方,我想它为中心。
我知道这种方法存在问题(弹出窗口阻止程序)。
按使用Javascript的标签,我清楚地只使用JavaScript中的事实,我以后JavaScript解决方案(在任何库/框架不依赖),请
,您可以批准一个答案? –