How can I make my dialog box cover the whole screen?

Question

I'm following this angular light box tutorial here . When I put the button inside a div the light box only expands to the size of the div. My code looks something like:

<div class='newPen'>
  <div ng-app='mean.items' ng-controller='MyCtrl'>
    <button ng-click='toggleModal()'>Open Modal Dialog</button>
    <modal-dialog show='modalShown' width='1000px' height='1000px'>
      <p>Modal Content Goes here<p>
    </modal-dialog>
  </div>
</div>

But the lightbox only shows in the div. How can I make my lightbox show up for the whole page?

If you need anymore information let me know.

Edit:

Here is a jsbin that I've made. In the example the model box gets messed up because of position absolute. The problem is in my code I have a bunch of css position absolutes... So is there anyway I can make the modal box cover the whole screen while maintaining my parent div's position absolute?

Answer 1

Try adding this to your css

.ng-modal-dialog {
  width: 100% !important;
  height: 100% !important;
}

Hope this helps...............