Currently, I am studying a tutorial on creating an angular lightbox, which can be found here. However, I am facing an issue where the lightbox only expands to the size of the div when I place the button inside it. The code snippet in question is as follows:
<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>
The main problem lies in the fact that the lightbox remains confined within the div. Is there a way for me to make the lightbox cover the entire page instead?
In case further details are required, please feel free to ask.
Edit:
I have created a jsbin to demonstrate the issue. It seems that the model box is disrupted due to the absolute positioning. Since I have multiple instances of CSS position absolutes in my code, is there a method to ensure that the modal box covers the entire screen while preserving the absolute positioning of its parent div?