asp.net - White Div in the center of the page on transparent div -
i trying display small white div on semi transparent div (which 100% of page , opacity of 0.6)
divs:
<div id="confirmdialogsingle" class="loading" runat="server" visible="false"> <div id="msgbox" class="loadingimg"> <br /> have request on chosen date. sure want submit request?<br /><br /> <asp:button id="btnconfirmsingle" runat="server" text="yes" width="60px" onclick="btnconfirmsingle_click" /> <asp:button id="btnno" runat="server" text="cancel" onclick="btnno_click" /> </div> </div>
css:
.loading { width: 100%; height: 100%; top:0; bottom: 0; left: 0; right: 0; margin: auto; position: fixed; background: white; opacity:0.6; z-index:9999; transition: width 2s; -moz-transition: width 2s;/* firefox 4 */ -webkit-transition: width 2s; /* safari , chrome */ -o-transition: width 2s; /* opera */ } .loadingimg { opacity: 1; margin: auto; width: 700px; text-align: center; height: 150px; padding: 10px; background-color: white; border:1px solid #d9a0e2; }
the problem small div (.loadingimg) not being displayed in center of screen (have tried top 50% , left 50%) , background still being displayed transparent instead of white!
try this:
.loading { position:fixed; width:100%; height:100%; top:0; left:0; background: rgba(255,255,255,0.6); z-index:9999; transition: width 2s; -moz-transition: width 2s;/* firefox 4 */ -webkit-transition: width 2s; /* safari , chrome */ -o-transition: width 2s; /* opera */ } .loadingimg { position: absolute; top: 50%; margin-top:-85px; left:50%; margin-left:-360px; width:700px; height:150px; opacity: 1; text-align: center; padding: 10px; background-color: #fff; border: 1px solid #d9a0e2; }
alternatively use semi-transparent png image background image on .loading div
Comments
Post a Comment