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>

然后在功能结束时添加return false;

Answer 2

这是我的模态代码：https://jsfiddle.net/fd4o3o6s/

用法很简单

new popup();

它支持我能想到的任何事情^^

确保模态始终居中

2 个答案: