Menu
I have a modal popup that initially shows some content but expands a div if a checkbox is selected. The modal expands correctly but doesn't recenter unless you scroll up or down. Is there a javascript event I can tack on to my javascript function to recenter the entire modal?
762
In this example first, use the find() method to find out the modal dialog. Then subtract the modal height from the window height and divide that into half and will place the modal that will be the centered(vertically). This solution will dynamically adjust the alignment of the modal.
Modals use position: fixed , which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You'll likely run into issues when nesting a . modal within another fixed element.
modal-dialog-centered to . modal-dialog to vertically center the modal.
You can vertically center a modal by passing the centered prop.
Here is what it is:
$find('ModalPopupExtenderClientID')._layout();
For example:
$find('detailsPopUpExtenderId')._layout();
and in aspx:
<ccl:ModalPopupExtender runat="server" ID="MyPopUpExtender" TargetControlID="pop" PopupControlID="PopUp" BehaviorID="detailsPopUpExtenderId" BackgroundCssClass="ModalBackground" />
BehaviorID being the property where to set the clientside id.
138
Be careful that this isn't tied to the resize event of the window. If it is, your recentering could trigger a resize event in IE, which would cause an infinte loop.
If it is tied to the resize event, allow 1 or 2 resize events to occur, but then ignore the rest. (I say 2, because in IE, a "restore" event on the window will trigger at least 2 resize events (3 in IE6).
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
