I don’t believe that the modal dialog from the AJ toolkit allows this.

While I have in the past used the modal dialog from the AJ toolkit, the lack of being able to position the dialog on the screen where I want was over time became a deal breaker.

The only real bonus points of using that AJ Toolkit popup is not having to write any JavaScript.

Other then not having to write JavaScript, over time I moved over to the jQuery.UI dialog due to additional features.

The jQuery.UI dialog works better then the AJ Toolkit one, and even works better then the bootstrap dialog and does so with less markup.

Only real downside of the jQuery.UI dialog is by default it looks like something from the early 2000 web days style wise (it looks poor).

However, with a bit of CSS work, it comes out nice.

The jQuery.UI dialog also supports drag around on the page better then does the AJ Toolkit dialog.

Your question here is thus another example and reason why going with the jQuery.UI dialog is a better choice.

The jQuery.UI dialog has both "modal" = true/false setting, ideal for this question.

Hence this example and markup:

Markup:

<asp:Button ID="cmdTest" runat="server" Text="Show my pop up"
    OnClientClick="showpop(this);return false;"
    CssClass="btn" />
<br />
<br />

<label>First Name</label> <br />
<asp:TextBox ID="txtFirst" runat="server"></asp:TextBox> <br /> <br />

<label>LastName Name</label> <br />
<asp:TextBox ID="txtLast" runat="server"></asp:TextBox> <br /> <br />

<label>Hotel Name</label> <br />
<asp:TextBox ID="txtHotelName" runat="server"></asp:TextBox>


<div id="mypopdiv" style="display:none;padding:20px" >
    <h3>My Test popup area</h3>
    <label>My Notes Area</label>
    <br />
    <br />
    <asp:TextBox ID="txtNotes" runat="server"
        TextMode="MultiLine" Height="139px" Width="354px"
        ></asp:TextBox>
</div>

<script>

    function showpop(btn) {
        myDialog = $("#mypopdiv")
        myDialog.dialog({
            title: "Page notes",
            sizable: true,
            appendTo: "form",
            width: "400",
            modal: false,
            dialogClass: "dialogWithDropShadow",
            position: { my: 'left top', at: 'right bottom', of: btn },
            buttons: {
                Close: function () {
                    myDialog.dialog('close');
                }
            }
        })
    }
</script>

And the result is this:

Note how I can freely open, close, move around the dialog, and am freely able to edit text in the popup, or edit + use any other control on the existing page.

Edit: jQuery and jQuery.UI via CDN

So, to reference jQuery and jQuery.UI, hence this :

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js" ></script>


    <style type="text/css">
         .dialogshadow
         {
             -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);  
             -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); 
         }
    </style>

And then your .dialog call looks like this:

        <script>

            function showpop(btn) {
                myDialog = $("#mypopdiv")
                myDialog.dialog({
                    title: "Page notes",
                    sizable: true,
                    appendTo: "form",
                    width: "400",
                    modal: false,
                    dialogClass: 'dialogshadow',
                    position: { my: 'left top', at: 'right bottom', of: btn },
                    buttons: {
                        Close: function () {
                            myDialog.dialog('close');
                        }
                    }
                })
            }
        </script>

Now, I like this shadow class somewhat better and is the one I used for this code:

<style>
    .dialogWithDropShadow {
        -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
        border-radius: 10px;
    }

        .dialogWithDropShadow
        .ui-dialog-titlebar {
            background: white;
            border: none;
            border-bottom: 1px solid #ccc;
        }

        .dialogWithDropShadow
        .ui-dialog-titlebar-close {
            display: none
        }
</style>

The above results in this:

So, I "hide" the "x" to close in the upper right corner. If you remove this:

        .dialogWithDropShadow
        .ui-dialog-titlebar-close {
            display: none
        }

Then you get this: