CODEWITHSUNDEEP
cssasp.netpopup
Alastair W
Alastair W

Reputation: 101

ASP.NET panel not appearing in the centre of the page when using CSS

I have set up a popup window that when appears, disables the background which darkens and is partially transparent leaving the window in the middle of the screen. However, the window appears at the top and unless I set the position to absolute and set the 'top' parameter I can't move it down. The problem is the popup window is dynamic and I want it to centre no matter what the size.

This is my aspx code:

<!-- Popup window -->
   <asp:Panel ID="popupWindow" CssClass="popup-window" Visible="false" runat="server">
      <asp:Panel CssClass="popup-border-window" runat="server">
         <asp:Panel CssClass="popup-container" runat="server">
            <asp:Panel CssClass="popup-content" runat="server">
               <asp:Panel id="myMessageBox" runat="server">            
                  <asp:Panel CssClass="popup-close-button" runat="server"><asp:ImageButton ID="imgPopupClose" ImageUrl="~/img/close.png" width="28" height="28" runat="server" /></asp:Panel>
                     <asp:Literal ID="litPopup" runat="server"></asp:Literal>        
                  </asp:Panel>
               </asp:Panel>
            </asp:Panel>
        </asp:Panel>
    </asp:Panel>

Here is the CSS:

/*Popup*/
.popup-window {
    position: absolute;
    top:0px;
    left:0px;
    z-index: 998;
    height: 100%;
    width: 100%;
    background-image: url(../img/backgroundFlyBox.png);
    display: block;

}

.popup-border-window {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000;
    border-radius:12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    padding: 12px;

}

.popup-container {
    background-color:white;
    position: relative;
    border:10px solid #7A838B;
    border-radius:20px;
    padding:20px;
    max-width:50%;
    max-height:50%;
    margin:0 auto;
}

Upvotes: 0

Views: 953

Answers (1)

Alastair W
Alastair W

Reputation: 101

Thanks to johnyTee for the solution. I added the following into the popup-border-window section of the CSS and it works a treat! thank you. 

position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

Upvotes: 1

Related Questions