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;