Launching an Ajax ModalPopupExtender from JavaScript

This is an updated version of the earlier (and very popular) Atlas article

It is by far the simplest way to launch an Ajax ModalPopupExtender from javascript.

The groundworks

Add a hidden link for ModalPopup Extender to attach to(which will NEVER be used)

<a href="#" style="display:none;visibility:hidden;" 
   onclick="return false" ID="dummyLink" runat="server">dummy</a>

Add the ID of the hidden link to the ModalPopupExtender

<ajaxToolkit:ModalPopupExtender ID="MyMPE" runat="server"
    TargetControlID="dummyLink"
    PopupControlID="EditorPanel"
    BackgroundCssClass="modalBackground" 
    DropShadow="true" 
    BehaviourID="MyMPE"
    OkControlID="OkButton"
    CancelControlID="CancelButton"> 
</ajaxToolkit:ModalPopupExtender>

Showing the modal popup

Now you've done this, in Javascript, you can display the modal quite easily... here's how.

$find('MyMPE').show();

Hiding the modal popup

Just as easy...

$find('MyMPE').hide();