My main problem is that when I write the following code:
<div>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display: none; width:233px">
Ready
<div align="center">
<asp:Button ID="OkButton" runat="server" Text="OK" />
<asp:Button ID="CancelButton" runat="server" Text="Cancel" />
</div>
</asp:Panel>
<br />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="LinkButton1"
PopupControlID="Panel1" BackgroundCssClass="modalBackground" DropShadow="true"
OkControlID="OkButton" OnOkScript="onOk()" CancelControlID="CancelButton" />
</div>
<div>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display: none; width:233px">
My form......
<div align="center">
<asp:Button ID="OkButton" runat="server" Text="OK" />
<asp:Button ID="CancelButton" runat="server" Text="Cancel" />
</div>
</asp:Panel>
<br />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="LinkButton1"
PopupControlID="Panel1" BackgroundCssClass="modalBackground" DropShadow="true"
OkControlID="OkButton" OnOkScript="onOk()" CancelControlID="CancelButton" />
</div>
With the following CSS:
.popupControl {
background-color:#AAD4FF;
position:absolute;
visibility:hidden;
border-style:solid;
border-color: Black;
border-width: 2px;
}
.modalBackground {
background-color:Gray;
filter: alpha(opacity=70);
opacity:0.7;
}
.modalPopup {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
}
On explorer 8 the modal popup is under the gray and his position is at the bottom of the page without the ability to click on it. On chrome its perfectly work.
Any Idea ?