如何在彈出窗口中居中放置圖像

單擊按鈕時，我的網站將打開一個包含單個圖像的窗口。如何在彈出窗口中居中放置圖像

我已經得到了一切工作，而不是最後一點 - 如何將圖像居中彈出？

我不是問如何居中新窗口，只是新窗口的內容。

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

如何在彈出窗口中居中放置圖像

回答

相關問題