将一个popup / modal置于div中

时间:2015-02-02 11:38:38

标签: html css angularjs

我正在尝试在div元素中创建类似popup / modal的东西,并且我很难处理弹出窗口的居中。 div大小是已知的,但弹出窗口不是。

顺便说一句,我正在使用angular,弹出内容加载了ng-include。我尝试使用ng-include的加载选项,然后计算位置,但它无法正常工作。我想加载事件发生在模板完全编译并附加到dom之前(它有像ng-repeat那样的角度指令)。

类似于:

<div style="width: 400px; height: 600px;">
  <div>background content</div>
  <div class="modal center" ng-include="template"></div>
</div>

我也尝试使用margin auto,但我想我的设置是错误的。

希望找到解决方案, 感谢。

3 个答案:

答案 0 :(得分:1)

试试这个:

.backgroundImage{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    /* also add vendor prefixes to support old versions */
}

.parentOfBackgroundImage{
    position: relative;
}

答案 1 :(得分:0)

@Mr_Green的另一种解决方案是:

{

    left: 50%;
    top: 50%;
    margin-left: -200px; /* width / 2 */
    margin-top:-300px; /* height / 2 */
}

这适用于所有浏览器(甚至IE),但缺点是你必须知道盒子大小(你需要计算填充和边框!)

答案 2 :(得分:0)

我会尝试将你的弹出窗口包装在这样的css表中:

<div id="yourDinamicDiv" style=position:relative">
  <div id="popup-wrapper" style="width:100%; height:100%; position:absolute; display:table">
    <div style="width: 400px; height: 600px; display:table-cell; vertical-align:middle;">
      <div>background content</div>
      <div class="modal center" ng-include="template"></div>
  </div>
</div>

希望这可以提供帮助。