Showing Ajax toolkit ModalPopUp using client controls

Since I am so fond of the Microsoft Ajax toolkit (And Microsoft Ajax Framework as well) I tried today to use the ModalPopUp control. Since I need in this current project to use client side controls to activate this control and showing the modal window, I needed to find a solution. The problem in the first place was that the ModalPopUp wants it's TargetControlID property to be a valid server controls (such as asp:button). So in order to trick the ModalPopUp control here is a simple work around:

<form id="form1" runat="server">
    <div>
    <asp:ScriptManager runat=server ID="sm">       
    </asp:ScriptManager>
    
    <input type=button value="Confirm" onclick="OpenModalWin();" />
    <asp:Button ID="dummyButton" runat="server"  Width="0" Height="0"

     Visible="true" />
    <br />
    
    text text text texttext texttext texttext text<br />
    text text text texttext texttext texttext text<br />
    text text text texttext texttext texttext text<br />
    text text text texttext texttext texttext text<br />
    text text text texttext texttext texttext text<br />
    text text text texttext texttext texttext text<br />
    text text text texttext texttext texttext text<br />
    text text text texttext texttext texttext text<br />
    text text text text 
    </div>
    
    <ajaxToolkit:ModalPopupExtender ID="MPE" runat="server"  
             TargetControlID="dummyButton" PopupControlID="divYesNO"

             BackgroundCssClass="BG" OkControlID="btnClose" 

             OnOkScript="OnOK()"></ajaxToolkit:ModalPopupExtender>

Notice that the server side button("dummyButton") is set to be not visible using the Width and Hieght properties.

When the user wished to show the modal window he can do it using simple javascript to activate the click event of this dummy button, like this:

function OpenModalWin()
{
     document.getElementById("<%= dummyButton.ClientID %>").click();
}

Another way and much more elegant way to do it is to use the ModalPopupExtender property by the name "BehaviorID". You can set this property to some name and then use it to open and show the modal window:

<ajaxToolkit:ModalPopupExtender ID="MPE" runat="server" 

           BehaviorID="ModalPopupExtenderBehviour" OnOkScript="YesFunction();"

           OnCancelScript="NOFunction();" OkControlID="btnYes" 

           CancelControlID="btnNO"  TargetControlID="dummyButton"

           PopupControlID="divYesNO"  BackgroundCssClass="BG" >

</ajaxToolkit:ModalPopupExtender>   

and then to open the modal window:

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

Enjoy