Placing ajax ModalPopupExtender inside User control

Question

I use an ajax ModalPopupExtender on many pages to display confirmation dialog.

So i would like to reuse same code on all pages by placing it in a use control. But I'm not sure it it possible to access this user control from a javascript (I don't want server side operations).

This is the code that is responsible for popup display, that i want to place inside user control:

<script language="javascript" type="text/javascript">
    var _source;
    var _popup;
    var _btn;
    var _div;

    function showConfirm(source, btnID, theDiv) {

        this._source = source;
        this._btn = btnID;
        this._div = theDiv;

        document.getElementById(btnID).click();   
        document.getElementById(theDiv).style.visibility = 'visible';
    }

        function okClick() {

            document.getElementById(_div).style.visibility = 'hidden';
            __doPostBack(this._source.name, '');
        }

        function cancelClick() {
            document.getElementById(_div).style.visibility = 'hidden';
            this._source = null;
        }
    </script>


 <cc1:ModalPopupExtender ID="modal" runat="server"
        TargetControlID="theButton" PopupControlID="div"
        OkControlID="btnOk" OnOkScript="okClick();" CancelControlID="btnNo"
        OnCancelScript="cancelClick();" BackgroundCssClass="modalBackground" />

 <div id="div" runat="server" align="center" class="confirm" style="display: none">
    <img align="absmiddle" src="../images/warning.jpg" />Are you sure you want to delete this item?
    </br>
    <asp:Button ID="btnOk" runat="server" Text="Yes" Width="50px" />
    <asp:Button ID="btnNo" runat="server" Text="No" Width="50px" />
 </div>

And on the "hosting" page, I want to assign JS to a buttons that will trigger the popup: This is the code that i have now (and should be adopted to the user control):

string s = string.Format("showConfirm(this,'{0}','{1}');return false;", theButton.ClientID, div.ClientID);            
btn.OnClientClick = s;

Answer 1

It's possible to call the modal popup extender from javascript as the modal popup control is just another DOM element. All you need to know is a selector which can select the item.

To "show" your modal popup extender from javascript all you will need to do is add some script to your master-page, user-control or page which displays the dom element which is the modal popup extender.

Alternatively you can use a javascript framework which has many other styles of modal dialog which are equally (if not more) useful than the ajax modal popup extender. This is probably more relevant to what you are trying to achieve considering your don't want to use ASP.NET's server side code capabilities.