3

I have an image inside ajax modal extender. It appears successfully when a button is clicked inside gridview but the image is scrolled to the right bottom of page by default and only comes to center when i press down arrow on keyboard. Why ? How to put it in center by default ? 

<asp:ModalPopupExtender ID="mdlMessageBox" BackgroundCssClass="modalBackground" runat="server" TargetControlID="hdnField1"

<asp:ImageButton ID="ImageLetterCopy" OnClick="ImageLetterCopy_Click"  style="max-width: 100%;max-height: 100%"   runat="server" />

CSS

 <style type="text/css">
        .modalBackground {
            background-color: Black;
            filter: alpha(opacity=90);
            opacity: 0.8;
        }

        .modalPopup {
            background-color: whitesmoke;
            border-width: 0px;
            border-style: solid;
            border-color: black;
            padding-top: 10px;
            padding-left: 10px;
            padding-right: 10px;
            /*width: 600px;
            height: 280px;*/
        }
    </style>

enter image description here

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
user5820210
  • 67
  • 7

2 Answers2

4

Add these for the .modalPopup:

.modalPopup {
  background-color: whitesmoke;
  border-width: 0px;
  border-style: solid;
  border-color: black;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  /* Additions */
  position: absolute;
  left: 25%;
  right: 25%;
  top: 25%;
  bottom: 25%;
}
Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
0

Try this with flex layout

 .modalBackground {
 background-color: Black;
 filter: alpha(opacity=90);
 opacity: 0.8;
 display: flex; 
 align-items: center; 
 justify-content: center; 
 }

.modalPopup{padding: 10px; max-width: 360px;}
Sivadass N
  • 917
  • 4
  • 12
  • 23