ModalPopupExtender 显示后保持页面解锁

Answer 1

我不相信 AJ 工具包中的模式对话框允许这样做。

虽然我过去使用过 AJ 工具包中的模式对话框，但随着时间的推移，无法将对话框放置在我想要的屏幕上，这成为了一个问题。

使用 AJ Toolkit 弹出窗口的唯一真正好处是无需编写任何 JavaScript。

除了不必编写 JavaScript，随着时间的推移，由于附加功能，我转向了 jQuery.UI 对话框。

jQuery.UI 对话框比 AJ Toolkit 对话框工作得更好，甚至比引导对话框工作得更好，并且标记更少。

jQuery.UI 对话框唯一真正的缺点是默认情况下它看起来像 2000 年初网络时代的风格（看起来很差）。

但是，通过一些 CSS 工作，结果会很不错。

jQuery.UI 对话框还支持在页面上拖动，比 AJ Toolkit 对话框更好。

您的问题是另一个例子，也是为什么使用 jQuery.UI 对话框是更好的选择的原因。

jQuery.UI 对话框具有“modal”= true/false 设置，非常适合这个问题。

因此有了这个示例和标记：

标记：

<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>

结果是这样的：

请注意我如何自由打开、关闭、在对话框中移动，以及如何自由编辑弹出窗口中的文本，或编辑+使用现有页面上的任何其他控件。

编辑：通过 CDN 的 jQuery 和 jQuery.UI

因此，引用 jQuery 和 jQuery.UI，因此：

<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>

然后你的 .dialog 调用看起来像这样：

        <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>

现在，我更喜欢这个影子类，并且是我在这段代码中使用的影子类：

<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>

以上结果是这样的：

所以，我“隐藏”“x”以关闭右上角。如果你删除这个：

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

然后你会得到这个：

Answer 2

我可以通过以下链接实现我的目标。谢谢你

https://www.aspdotnet-suresh.com/2013/10/jquery-floating-div-on-page-scroll.html