This question raises an important point.

Traditionally, using a button has been the solution:

<asp:Button ID="Button1" runat="server" Text="Button" Width="128px" 
    CssClass="btn"
    OnClientClick="return confirm('delete this hotel');"
    OnClick="Button1_Click"                
    />

In this scenario, if the OnClientClick function returns true, the server-side button code executes. However, if it returns false, the server-side button code does not execute.

This approach works because the confirm method pauses the code execution. But what happens with more modern dialogs like Bootstrap, Sweet Alert, and jQuery.UI dialogs?

These dialogs do not pause code execution. Code that blocks the web UI is considered bad practice, so these modern dialogs operate asynchronously - they don't stop code execution or wait for user input.

So how can we implement dialogs that require user input before executing the server-side button code? Many complex JavaScript examples exist, but most are suboptimal. We need a solution that seamlessly integrates with existing buttons while providing a more visually appealing dialog experience.

Let's consider a custom popup option:

https://i.sstatic.net/W4VWU.png

As shown above, the default confirmation dialog can appear dated and unattractive in certain browsers. Let's explore a different approach using a custom popup dialog that enhances user interaction without causing post-backs.

Here's how we can set up the button and the custom popup dialog code:

https://i.sstatic.net/czNft.png

The markup and pop dialog code look like this:

<asp:Button ID="cmdDelete" runat="server" Text="Delete Hotel" Width="128px" 
    CssClass="btn"
    OnClientClick="return MyConfirm(this);"
    OnClick="cmdDelete_Click"                
    />

    <div id="MyCoolDialog" style="padding:25px;text-align:center;display:none">
        <h4>Really delete this hotel?</h4>
        <h4>(check the check box for double confirmation)</h4>
        <br />
        <asp:CheckBox ID="chkConfirm" runat="server" Text="Check here to confirm" 
            Style="margin-left:1px" ClientIDMode="Static"/>
        <br />
    </div>

    <script>
        MyConfirmOk = false
        function MyConfirm(btn) {

            if (MyConfirmOk) {
                return true
            }

            var myDialog = $("#MyCoolDialog");
            myDialog.dialog({
                title: "Confirm Hotel delete",
                modal: true,
                appendTo: "form",
                width: "420px",
                buttons: [
                    {
                        id: "MyOkBtn",
                        text: "ok",
                        click: function () {
                            MyConfirmOk = true
                            $(btn).click()
                        }
                    },
                    {
                        id: "MyCancel",
                        text: "Cancel",
                        click: function () { myDialog.dialog("close"); }
                    }
                ]
            })
            return false
        }

This setup allows for a seamless user experience. The button triggers the custom dialog, which prompts the user for input before executing the server-side button code.

Edit: Redirecting to a Different Page Instead of Using a Div

JQuery dialog can also open a separate page in some cases, although this approach may introduce complexities as you're loading another page into the current context. Here's how you can achieve this:

A modified version of the pop div would now look like this:

        <br />
         <asp:Button ID="cmdDelete" runat="server" Text="Edit Hotel" Width="128px" 
            CssClass="btn"
            OnClientClick="return MyConfirm(this);"
            OnClick="cmdDelete_Click"  />

        <div id="MyCoolDialog" style="display:none">
        </div>


        <script>
        MyConfirmOk = false
        function MyConfirm(btn) {

            if (MyConfirmOk) {
                return true
            }

            var myDialog = $("#MyCoolDialog");
            myDialog.dialog({
                title: "Edit Hotel",
                modal: true,
                appendTo: "form",
                width: "830px",
                autoOpen: false,
                appendTo: "form",
                position: { my: "left top", at: "right bottom", of: btn },
                buttons: [
                    {
                        id: "MyOkBtn",
                        text: "ok",
                        click: function () {
                            MyConfirmOk = true
                            $(btn).click()
                        }
                    },
                    {
                        id: "MyCancel",
                        text: "Cancel",
                        click: function () { myDialog.dialog("close"); }
                    }
                ]
            })
            myDialog.load("EditHotel.aspx")
            myDialog.dialog('open')
            return false
        }

This updated approach showcases how you can load an entire form into a dialog box, enabling a more robust user interaction without relying solely on div elements. Although loading external content into the dialog may pose challenges, tools like jQuery.UI provide mechanisms to facilitate such implementations.

Key libraries used:

jQuery (commonly installed library)

jQuery.UI (enables dialog functionalities)