ModalPopupExtender Component

The ModalPopupExtender displays a target element as a modal popup with an overlay backdrop. It supports OK/Cancel buttons, drag support, drop shadow, and Escape key dismissal. This emulates the Ajax Control Toolkit ModalPopupExtender.

1. Basic Modal Popup with OK/Cancel

A button opens a modal popup panel. The user confirms with OK or dismisses with Cancel.

<!-- Web Forms (Before) -->
<asp:Button ID="btnShow" runat="server" Text="Show Modal" />
<asp:Panel ID="pnlModal" runat="server" CssClass="modal-popup" style="display:none">
    <p>Are you sure you want to proceed?</p>
    <asp:Button ID="btnOk" runat="server" Text="OK" />
    <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="mpe1" runat="server"
    TargetControlID="btnShow" PopupControlID="pnlModal"
    OkControlID="btnOk" CancelControlID="btnCancel"
    BackgroundCssClass="modal-backdrop" />

<!-- Blazor with BWFC (After) -->
<button id="btnShow">Show Modal</button>
<div id="pnlModal" style="display:none">
    <p>Are you sure you want to proceed?</p>
    <button id="btnOk">OK</button>
    <button id="btnCancel">Cancel</button>
</div>
<ModalPopupExtender TargetControlID="btnShow" PopupControlID="pnlModal"
                    OkControlID="btnOk" CancelControlID="btnCancel"
                    BackgroundCssClass="modal-backdrop" />

2. Modal with Custom Backdrop CSS

Customize the backdrop overlay using your own CSS class for branding or visual emphasis.

<!-- Use BackgroundCssClass to style the overlay -->
<ModalPopupExtender TargetControlID="btnShow" PopupControlID="pnlModal"
                    OkControlID="btnOk" CancelControlID="btnCancel"
                    BackgroundCssClass="modal-backdrop-custom" />

<style>
    .modal-backdrop-custom {
        background-color: rgba(0, 100, 200, 0.4);
    }
</style>

3. Modal with Drag Support

Enable Drag="true" to allow the user to reposition the modal popup. Use PopupDragHandleControlID to designate a specific drag handle.

<ModalPopupExtender TargetControlID="btnShow" PopupControlID="pnlModal"
                    OkControlID="btnClose"
                    BackgroundCssClass="modal-backdrop"
                    Drag="true"
                    PopupDragHandleControlID="dragHandle" />

<div id="pnlModal" style="display:none">
    <div id="dragHandle" class="drag-handle">Drag me</div>
    <p>Draggable content</p>
    <button id="btnClose">Close</button>
</div>

4. Modal with Drop Shadow

Set DropShadow="true" to add a visual shadow effect to the popup panel.

<ModalPopupExtender TargetControlID="btnShow" PopupControlID="pnlModal"
                    OkControlID="btnClose"
                    BackgroundCssClass="modal-backdrop"
                    DropShadow="true" />

5. Programmatic Show/Hide

Use Blazor visibility state to programmatically control when the modal trigger becomes active. The extender still manages the show/hide behavior via the target button.

@if (showTrigger)
{
    <button id="btnShow">Open Modal</button>
    <ModalPopupExtender TargetControlID="btnShow"
                        PopupControlID="pnlModal"
                        OkControlID="btnOk" CancelControlID="btnCancel"
                        BackgroundCssClass="modal-backdrop" />
}

@code {
    private bool showTrigger = false;
}

Migration Guide: Ajax Control Toolkit to Blazor

Ajax Control Toolkit (Before)

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Button ID="btnShow" runat="server" Text="Show Popup" />
<asp:Panel ID="pnlPopup" runat="server" CssClass="popup" style="display:none">
    <p>Modal content here</p>
    <asp:Button ID="btnOk" runat="server" Text="OK" />
    <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
    TargetControlID="btnShow"
    PopupControlID="pnlPopup"
    OkControlID="btnOk"
    CancelControlID="btnCancel"
    BackgroundCssClass="modal-backdrop"
    DropShadow="true"
    Drag="true"
    PopupDragHandleControlID="pnlDragHandle" />

Blazor with BWFC (After)

<button id="btnShow">Show Popup</button>
<div id="pnlPopup" style="display:none">
    <p>Modal content here</p>
    <button id="btnOk">OK</button>
    <button id="btnCancel">Cancel</button>
</div>
<ModalPopupExtender TargetControlID="btnShow"
                    PopupControlID="pnlPopup"
                    OkControlID="btnOk"
                    CancelControlID="btnCancel"
                    BackgroundCssClass="modal-backdrop"
                    DropShadow="true"
                    Drag="true"
                    PopupDragHandleControlID="pnlDragHandle" />

Migration Steps

1. Remove asp:ScriptManager (not needed in Blazor)
2. Replace <asp:Button> with a standard <button> element
3. Replace <asp:Panel> with a <div> (keep the same id)
4. Replace <ajaxToolkit:ModalPopupExtender> with <ModalPopupExtender>
5. Keep the same property names: TargetControlID, PopupControlID, OkControlID, CancelControlID, BackgroundCssClass
6. DropShadow and Drag properties carry over directly
7. Ensure the page uses @rendermode InteractiveServer (JS interop required)