CODEWITHSUNDEEP
htmlcssangularjs
Ozzz123
Ozzz123

Reputation: 165

center a popup/modal inside a div

I'm trying to create something like a popup/modal inside a div element and I'm getting a hard time dealing with centering the popup. The div size is known, but the popup isn't.

Btw, I'm using angular and the popup content is loaded with ng-include. I tried using the load option of ng-include and then calculating the position but it wasn't working. I guess the load event happens before the template is completely compiled and attached to the dom (it has angular directives like ng-repeat).

It is something like:

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

I also tried with margin auto, but i guess my setup is wrong.

hope to find a solution, Thanks.

Upvotes: 1

Views: 1726

Answers (3)

DonutMan
DonutMan

Reputation: 36

I will try to wrap your popup in a css table like this:

<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>

Hope this can help.

Upvotes: 0

Ionuț Staicu
Ionuț Staicu

Reputation: 22166

An alternative solution to @Mr_Green would be this:

{

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

This works great on all browsers (even IE), but has the disadvantage that you must know the box size (you need to count also padding & borders!)

Upvotes: 0

Mr_Green
Mr_Green

Reputation: 41832

Try this:

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

.parentOfBackgroundImage{
    position: relative;
}

Upvotes: 1

Related Questions