I have an ASP.NET 4.5 App, where I have to use a series of Modal windows. The first Modal window allows the user to input some data, while the second Modal is used for confirmation purposes. For some reason, the second Modal window, will not center align. I've tried the {position: absolute; | RepositionMode="None" | X="0" Y="0" | JS .add_shown } and it does not appear to be working. Maybe there is problem with my design. Strange enough, if I scroll the page or resize the browser, the Child Window snaps into place. I have tinkered with my CSS, HTML, and Modal Attributes with no success. I definitely need an extra pair of eyes. Any help would be greatly appreciated. Thanks in advance.
HTML
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="MODAL.aspx.vb" Inherits="TEST.MODAL" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="act" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title>TEST</title><link type="text/css" rel="stylesheet" href="~/Styles/Main.css"/></head><body><form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager" runat="server" EnablePartialRendering="true" /><asp:UpdatePanel ID="pnlForm" runat="server"><ContentTemplate><br /><br /><br /><asp:Button ID="ibtSignee" runat="server" Text="Override" Font-Bold="true" /><%-- PARENT --%><asp:Panel ID="pnlEndorse" runat="server" CssClass="endorse-panel" style="display: none;"
Height="519px" Width="550px"><asp:Table runat="server" Width="100%"><asp:TableRow><asp:TableCell ColumnSpan="5" Height="90px" Width="100%" /></asp:TableRow><asp:TableRow><asp:TableCell Width="48px"/><asp:TableCell ColumnSpan="1" Height="20px" HorizontalAlign="Left"
Width="226px" /><asp:TableCell ColumnSpan="1" /><asp:TableCell ColumnSpan="1" Height="20px" HorizontalAlign="Left"
Width="226px" /><asp:TableCell Width="48px"/></asp:TableRow><asp:TableRow><asp:TableCell Width="48px"/><asp:TableCell ColumnSpan="1" Height="30px" HorizontalAlign="Left"
Width="226px" /><asp:TableCell ColumnSpan="1" /><asp:TableCell ColumnSpan="1" Height="30px" HorizontalAlign="Left"
Width="226px" /><asp:TableCell Width="48px"/></asp:TableRow><asp:TableRow><asp:TableCell ColumnSpan="5" Height="14px" /></asp:TableRow><asp:TableRow><asp:TableCell Width="48px"/><asp:TableCell ColumnSpan="3" Height="20px" HorizontalAlign="Left" /><asp:TableCell Width="48px"/></asp:TableRow><asp:TableRow><asp:TableCell Width="48px"/><asp:TableCell ColumnSpan="3" Height="30px" HorizontalAlign="Left" /><asp:TableCell Width="48px"/></asp:TableRow><asp:TableRow><asp:TableCell ColumnSpan="5" Height="14px"><asp:HiddenField ID="hdnSTU_OVR_KEY" runat="server" Value="" /></asp:TableCell></asp:TableRow><asp:TableRow><asp:TableCell Width="48px"/><asp:TableCell ColumnSpan="3" Height="20px" HorizontalAlign="Left" /><asp:TableCell Width="48px"/></asp:TableRow><asp:TableRow><asp:TableCell Width="48px"/><asp:TableCell ColumnSpan="3" Height="140px" HorizontalAlign="Left" /><asp:TableCell Width="48px"/></asp:TableRow><asp:TableRow><asp:TableCell ColumnSpan="5" Height="15px" /></asp:TableRow><asp:TableRow><asp:TableCell Width="48px"/><asp:TableCell ColumnSpan="3" Height="40px" HorizontalAlign="Left" /><asp:TableCell Width="48px"/></asp:TableRow><asp:TableRow><asp:TableCell Width="48px"/><asp:TableCell ColumnSpan="2" Height="60px" HorizontalAlign="Center"
VerticalAlign="Middle" /><asp:TableCell ColumnSpan="1" Height="60px" HorizontalAlign="Right"
VerticalAlign="Middle"><asp:ImageButton ID="ibtAffirm" runat="server"
ImageUrl="~/Images/CustomImage/frm-button-over-off.png" /></asp:TableCell><asp:TableCell Width="48px"/></asp:TableRow></asp:Table><%-- CHILD --%><asp:Panel ID="pnlConfirm" runat="server" CssClass="confirm-panel" style="display: none;"
Height="203px" Width="550px"></asp:Panel><asp:Button ID="btnSecret" runat="server" style="display: none;" /><act:ModalPopupExtender ID="mpConfirm"
PopupControlID="pnlConfirm"
TargetControlID="btnSecret"
BackgroundCssClass="modal-circumvent"
runat="server"></act:ModalPopupExtender><%-- CHILD --%></asp:Panel><asp:Button ID="btnCovert" runat="server" style="display: none;" /><asp:HiddenField ID="hfEndorse" runat="server" Value="false" /><act:ModalPopupExtender ID="mpEndorse"
PopupControlID="pnlEndorse"
TargetControlID="btnCovert"
BackgroundCssClass="modal-circumvent"
runat="server" ></act:ModalPopupExtender><%-- PARENT --%></ContentTemplate><Triggers></Triggers></asp:UpdatePanel></form></body></html>
CSS
html
{
overflow: auto;
}
body
{
width: 1024px;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, Sans-Serif;
background: #8B94C4 url('../Images/CustomImage/Sunrise.png') top center no-repeat;
text-align: center;
font-size: .80em;
margin: 0 auto;
padding: 0px;
clear: both;
}
table
{
border-collapse: collapse;
text-align: center;
}
select
{
background-color: #E8FAFF;
border: 1px solid #7BA8B5;
font-family: "Courier";
}
.modal-circumvent
{
background-image: url('../Images/CustomImage/endorse-modal.png');
}
.endorse-panel
{
background-image: url('../Images/CustomImage/AppEndorse.png');
background-repeat: no-repeat;
font-family: Arial;
font-size: 9pt;
color: #336699;
}
.confirm-panel
{
background-image: url('../Images/CustomImage/AppConfirm.png');
background-repeat: no-repeat;
font-family: Arial;
font-size: 9pt;
color: #336699;
}