jQuery modal popup confirm - handle server side postback
<p>I am trying to run a modal popup for a confirm message after clicking an asp:Button control. I'm using the tutorial from <a href="http://tutorialzine.com/2010/12/better-confirm-box-jquery-css3/" rel="nofollow">http://tutorialzine.com/2010/12/better-confirm-box-jquery-css3/</a> as a base.</p>

<p>Currently I have the client side action working and the modal popup coming up with my message and confirm buttons. </p>

<p>The problem I'm having is with setting the doPostBack for the yes button:  </p>

<pre><code> __doPostBack([button I want to target], '');
</code></pre>

<p>I've tried to use: </p>

<pre><code>&lt;%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.Button123))%&gt;;
</code></pre>

<p>for the doPostBack command to find the button control. The problem with this method is, it's firing the postback before I have an option to load the modal.</p>

<p>Using the hardcoded doPostBack that is returned from the above "GetPostBackEventReference"</p>

<pre><code> __doPostBack('ctl00$ContentPlaceHolderBody$Button123', '');
</code></pre>

<p>I Am able to postback to the proper server onClick event after clicking yes in the modal.</p>

<p>I would like to know how to use the ClientScript.GetPostBackEventReference method and not postback before showing the modal or an alternative to this.</p>

<p>Any help would be appreciated.</p>

<p>Here is the code:</p>

<pre><code>&lt;asp:Button ID="Button123" runat="server" Text="Test" OnClick="Ctl_ButtonUpdateRecord_Click" /&gt;

$(document).ready(function () {

    $("input[id$='Button123']").click(function () {

        $.confirm({
            'title': 'Delete Confirmation',
            'message': 'You are about to delete this item. &lt;br /&gt;It cannot be restored at a later time! Continue?',
            'buttons': {
                'Yes': {
                    'class': 'blue',
                    'action': function () { &lt;%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.Button123))%&gt;;
                                             //__doPostBack('ctl00$ContentPlaceHolderBody$Button123', '');
                                             }
                },
                'No': {
                    'class': 'gray'
                }
            }
        });

        return false;

    });

});

(function ($) {

    $.confirm = function (params) {

        if ($('#confirmOverlay').length) {
            // A confirm is already shown on the page:
            return false;
        }

        var buttonHTML = '';
        $.each(params.buttons, function (name, obj) {

            // Generating the markup for the buttons:

            buttonHTML += '&lt;a href="#" class="button ' + obj['class'] + '"&gt;' + name + '&lt;span&gt;&lt;/span&gt;&lt;/a&gt;';

            if (!obj.action) {
                obj.action = function () { };
            }
        });

        var markup = [
            '&lt;div id="confirmOverlay"&gt;',
            '&lt;div id="confirmBox"&gt;',
            '&lt;h1&gt;', params.title, '&lt;/h1&gt;',
            '&lt;p&gt;', params.message, '&lt;/p&gt;',
            '&lt;div id="confirmButtons"&gt;',
            buttonHTML,
            '&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;'
        ].join('');

        $(markup).hide().appendTo('body').fadeIn();

        var buttons = $('#confirmBox .button'),
            i = 0;

        $.each(params.buttons, function (name, obj) {
            buttons.eq(i++).click(function () {

                // Calling the action attribute when a
                // click occurs, and hiding the confirm.

                obj.action();
                $.confirm.hide();
                return false;
            });
        });
    }

    $.confirm.hide = function () {
        $('#confirmOverlay').fadeOut(function () {
            $(this).remove();
        });
    }

})(jQuery);
</code></pre>
