UserControl 阻止/隐藏/覆盖页面上的所有其他控件

Question

假设我做了一个用户控件。 我希望它具有以下行为：

1. 当它的Visible属性为true时，用户只能操作它内部的东西，而不能操作它之外的任何东西，即它包含的用户控件（如果有的话）中的任何其他控件，并且用户不能访问该页面。 （如果用户也看不到它们就更好了。）
2. 上述效果在回发之间持续，直到其Visible更改为false 。 当这种情况发生时，这个用户控件对用户是不可见的，它之外的东西又恢复到正常的 state。

如何实现？

Answer 1

一种不错的方法是将 UC 放在一个 div 中。 然后使用对话框（jquery.UI 对话框）弹出 div。 当显示这样的对话框时，屏幕背景变为灰色，只有控件可见。 如果您单击/使用该控件中导致页面回发的任何按钮，那么它将折叠、消失，并且页面恢复正常，用户可以使用。

效果看起来像这样：

这是一个编辑数据的 GV。 当我点击编辑按钮时，我会显示我的 UC（编辑一行）。

所以，这个网格：

因此，这是实现目标的一种迂回方式。 通过弹出一个 div（里面有 UC），然后我们为用户解决“UI”，让用户在/在/查看弹出对话框时获得焦点，更好的是，整个屏幕背景变灰，用户无法选择/使用/单击页面上的任何控件。

上面的想法可能不适合你，但如果它可以被采纳，那么你所有的messay代码和倒立禁用页面的rest都是自动为你完成的。

如前所述，我们都安装了 jQuery。 您必须添加 jQuery.UI。

因此，弹出上述对话框的代码是这样的：

   <script>
       function popedit() {

            MyPWidth = "62em"
            MyWidth = $(window).width()

            if (MyWidth < 840) {
                MyPWidth = (MyWidth - 25)  + 'px'
            }

            var myDialog = $("#EditRecord");
            myDialog.dialog({
                title: "Edit Hotel",
                width: MyPWidth,
                modal: true,
                appendTo: "form",
                dialogClass : "dialogWithDropShadow",
                close: myclose
            });
       }

因此，上面弹出名为 EditRecord 的“div”，它会为您执行 rest。

Answer 2

事实证明这实际上很容易：

放置一个<div class="overlay"></div>作为用户控件内的最顶层元素，包围所有其他元素和子控件。 并在站点 CSS 样式表中定义.overlay class 如下所示：

position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
overflow: auto;