半透明の div (ページの 100%、不透明度 0.6) に小さな白い div を表示しようとしています。
区分:
<div id="confirmDialogSingle" class="Loading" runat="server" visible="false">
<div id="msgBox" class="loadingImg">
<br /> You already have a request on the chosen date. Are you sure you want to submit this 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 and 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;
}
問題は、小さな div (.loadingImg) が画面の中央に表示されず (上 50% と左 50% も試しました)、その背景がまだ白ではなく透明に表示されていることです!