Override absolute position on child container (modal window)
I have a modal that is being pulled from the server and inserted into a container that is absolute. When this window is launched to open, it does not display correctly, it fits inside the container, and most of it is hidden.
Is there a specific css for the modal window container ( MyModalWindow ). My code looks like this:
<div style="position:relative;">
<div style="position: absolute;">
<div id="MyModalWindow"> </div>
</div>
</div>
This is a jquery tool window and gives the following style to MyModalWindow .:
element.style {
display:block;
left:183.5px
position:absolute;
top:468.4px;
z-index:9999;
}
I basically want the div so that it is not a child of the parent, since since jquery calculates it, it will be positioned in the center of the webpage no matter where the div is.
a source to share
Try disabling these inline positioning styles and see if that fixes it:
<div>
<div>
<div id="MyModalWindow"> </div>
</div>
</div>
Alternatively, you could just make the #MyModalWindow div sit outside of the page structure and add it to the end of its body yourself. Then the jquery tools plugin should do the rest, for example:
<div>
<div>
</div>
</div>
<div id="MyModalWindow"> </div>
a source to share
CSS for MyModalWindow selection :
#MyModalWindow
{
position:relative;
top:10px;
left:10px;
}
Where # refers to ids
and. refers to classes
. The top and left properties will help you position the div where you want it inside its parent.
And this HTML:
<div style="position:absolute;">
<div id="MyModalWindow"> </div>
</div>
a source to share