Recently, I noticed an issue with the ConfirmButtonExtender on a Cancel button. It was working perfectly fine in Firefox with a semi-transparent background and a simple modal popup. But when I tested it on IE, it showed a generic JavaScript-style alert box instead.
I observed that the ModalPopupExtender works smoothly in both browsers, probably because of better CSS control (although I'm not entirely sure).
Has anyone else encountered this problem with the ConfirmButtonExtender? I want to fix it before considering switching to the ModalPopupExtender as an alternative.
<div class="base-container-controls-100pct">
<asp:Button ID="UxCancel" runat="server" Text="Cancel" CssClass="button-sm" OnClick="UxCancelClick" />
<asp:ConfirmButtonExtender ID="ConfirmButtonExtender2" runat="server" TargetControlID="UxCancel">
</asp:ConfirmButtonExtender>
</div>
CSS
.button, .button-sm, .button-ms, .button-md, .button-lg, .button-xl, .button-disabled, .button-status-close,
.button-grid, .button-grid-sm, .button-grid-ms, .button-grid-md, .button-grid-lg, .button-grid-xl
{
margin: 2px;
background-color: #0088C2;
color: #f2f2f2;
border-color: #DDDDDD #AAAAAA #AAAAAA #DDDDDD;
border-width: 1px;
border-style: none;
font-size: .8em;
height: 30px;
padding: 2px 12px 2px 12px;
cursor: pointer;
-moz-user-select: none;
}
.button-grid, .button-grid-sm, .button-grid-ms, .button-grid-md, .button-grid-lg, .button-grid-xl
{
height: 25px;
font-size: .8em;
}
.button-sm, .button-grid-sm
{
width: 75px;
}
.base-container-controls-100pct
{
width: 100%;
float: left;
padding: 0px;
margin: 0px;
border: none;
height: auto;
}