Question

单击按钮时，我的网站会打开一个包含单个图像的窗口。

除了最后一点之外，我的一切都工作了 - 如何将图像置于弹出窗口中心？

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

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

Answer 1

从这里

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");

Answer 2

将此添加到您的样式

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

Answer 3

使用您已有的：

       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%);
    }

Answer 4

我们应该将样式化的图像元素导入到弹出窗口中而不是在弹出窗口中加载图像资源。

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

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

4 个答案: