如何在弹出窗口中居中放置图像

单击按钮时，我的网站将打开一个包含单个图像的窗口。如何在弹出窗口中居中放置图像

我已经得到了一切工作，而不是最后一点 - 如何将图像居中弹出？

我不是问如何居中新窗口，只是新窗口的内容。

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解决方案（在任何库/框架不依赖），请

来源

2016-04-29 MyDaftQuestions

，您可以批准一个答案？ –

jquery popup image centering从这里

function center(divid) { 
$(divid).css("position","absolute"); 
$(divid).css("top", (($(window).height() - $(divid).outerHeight())/2) + $(window).scrollTop() + "px"); 
$(divid).css("left", (($(window).width() - $(divid).outerWidth())/2) + $(window).scrollLeft() + "px"); 
    return this; 
}

使用方法：

center("#divid");

来源

2016-04-29 15:00:27

你正在使用Javascript，为什么你不能只使用Jquery呢？ –

您已将其标记为Javascript问题，考虑到您尚未明确指出您在JQuery中不希望得到答案，我的回答是否有效？另外Jquery是一个Javascript库，我不明白Jquery的答案如果没有指定答案不应该是Jquery，那么Jquery如何在Javascript问题中没有地方。 –

添加到您的风格

img.style.display = "block"; 
img.style.margin = "0 auto";

来源

2016-04-29 15:02:33 Cameron637

@Dave你是对的，我的坏。只是修复它。当我写这篇文章时我感到困惑，因为我使用了另一段代码，我的工作方式不同。 – Cameron637

使用你已经拥有：

 function showImage(imgEle) { 
      var url=imgEle.src; 
      var w = imgEle.width + (10/100 * imgEle.width); 
      var h = imgEle.height+ (10/100 * imgEle.height); 
      imgEle.style.marginLeft = 50% - (w/2);// Center horizontally 
      imgEle.style.marginTop = 50% - (h/2); // Center vertically 
      imgEle.style.display = "block"; 
      window.open(url,"Image Viewer",'width='+w+',height='+h+',resizable=1, titlebar=no, toolbar=no'); 
     }

如果由于某种原因，不能正常工作，请尝试使用transform centering trick

// The modal that is the image's parent. 
    // Absolute or fixed works as well. 
    .box { 
     position: relative; 
    } 

    // The image inside the modal. 
    .center { 
     position: absolute; 
     left: 50%; 
     top: 50%; 
     transform: translate(-50%, -50%); 
    }

来源

2016-04-29 15:08:28 zer00ne

我们应该进口风格的图像元素插入弹出，而比在弹出窗口中加载图像资源。

function showImg (imgURL) { 

    var imageElem = document.createElement('img'); 

    imageElem.onload = function() { 

    // style this image element 
    // ... 

    // create popup window with certain dimensions 
    // ... 

    // import image element from current document into popup document body <<<<<<<<< 
    popupWindow.document.body.appendChild(popupWindow.document.importNode(imageElem)); 
    }; 

    // load image now 
    imageElem.src = imgURL; 
};

fiddle

来源

2016-04-29 16:27:23 user943702

提琴没有出现任何动作 – MyDaftQuestions

首先，禁用所有弹出窗口拦截器（或“allow-this-time”），然后我们会在弹出窗口中看到一个图像（jsfiddle的图标） – user943702

如何在弹出窗口中居中放置图像

回答

相关问题