確保Modal總是居中

Question

我有一個模式對話框div，根據用戶點擊的內容可以包含不同大小的內容。

如何確保它始終在窗口內水平居中，而不管模式內的內容大小，以及窗口大小？

這是我所擁有的jsFiddle。

HTML

<a href="#" onclick="openModal('asfghgggggggg');">Open Modal - smaller content</a> 
<br /> 
<a href="#" onclick="openModal('a;lsdkjfa;ksdjhgfsakldjfhaksjdhfkasldjhf a sdlkfjhsa fg sdfghdsfgsdfgsdfgsdf g dsfgdsfgsdfgsdfgsdffgsdfgsdfgs dfg sdf g sdfg sdf g sdfg sdf g sd fgdsf g sdf g');">Open Modal - larger content</a> 

<div id="emod"> 
<p><a href="#" onclick="closeModal();">close</a></p> 
</div> 

CSS

#emod 
{   
    background-color: #fff; 
    display: none; 
    position: absolute; 
    top: 50%; left: 50%; 
    margin: -150px 0 0 -100px; 
    padding: 20px 100px 100px 100px; 
    z-index: 1000; 
} 

JS

function openModal(txt){ 
    var modalContainer = document.getElementById('emod');   
     modalContainer.style.display = 'block'; 
     modalContainer.innerHTML += txt; 
} 


function closeModal(){ 
    var modalContainer = document.getElementById('emod');   
     modalContainer.style.display = 'none'; 
     modalContainer.innerHTML ='<p><a href="#" onclick="closeModal();">close</a></p>'; 
} 

我使用純JS此功能，但我們做負載的jQuery如果它更有意義，可以使用它。

Answer 1

可以居中模式是這樣的：

#emod {  
    position: fixed; 
    top: 50%; 
    left: 50%; 
    z-index: 1000; 
    display: none; 
    background-color: #fff; 
    -ms-transform: translate(-50%,-50%); /* IE 9 */ 
    -webkit-transform: translate(-50%,-50%); /* Safari */ 
    transform: translate(-50%,-50%); 
    box-sizing: border-box; 
    padding: 20px; 
} 

p { 
    margin: 0; 
} 

要與滾動解決這個問題到頂部，你必須阻止默認情況下，當你使用一個錨標記點擊打開你的模式。

<a href="#" onclick="return openModal('asfghgggggggg');">Open Modal - smaller content</a> 

然後在你的函數

Answer 2

末尾添加return false;這裏是我的模態代碼：https://jsfiddle.net/fd4o3o6s/

用法是

new popup(); 

一件簡單的事它支持任何我能想到的^^