javascript / CSS - 阻止点击最后打开的弹出窗口之外的元素（按钮），最后打开的弹出窗口之外的所有元素（按钮）都是灰色的

Question

当我在默认页面中打开一些弹出窗口（popup1）并单击此弹出窗口上的某个按钮并导致打开下一个弹出窗口（popup2）时，我想禁用单击上一个弹出窗口或默认页面中的某些元素while 在最后一个弹出窗口中打开，并且在最后一个弹出窗口中全部显示为灰色。有没有可能做到这一点？

我希望它看起来像这样... https://www.dropbox.com/s/6qq07c5munojhop/popups.png

代码很长，但缩写代码是： CSS：

.popup1{
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
text-align: center;
z-index: 1000;
background-color: #fff;
}

.popup1Div {
width: 1310px;
margin: 100px auto;
background-color: #fff;
border: 1px solid #000;
padding: 15px;
text-align: center;
}

.popup2{
visibility: hidden;
z-index:10;
position:fixed;
top:50%; left:50%;
width:640px; height:480px;
margin-left:-320px; margin-top:-240px;
background-color: rgba(211,211,211,0.6);
}

.popup2 div {
 width:432px;
 height:150px;
 margin: 150px auto;
 background-color: #fff;
 border:1px solid #000;
 padding:15px;
 text-align:center;
 }

ASP.NET - popup1 的组件（显示 popup2）

<asp:UpdatePanel ID="popup1UpdatePanel" runat="server" UpdateMode="Always">
    <ContentTemplate>
        ...
        <div>
        ...
        </div>
        <div id="popup2" class="popup2" style="visibility: hidden;">
            <div>
                ...
                <button onclick="popupVisibility(); return false;">Close</button>
            </div>
        </div>
        <div>
        ...
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

ASP.NET - 页面代码（显示 popup1）

<%@ Register Src="~/Controls/popup1Component.ascx" TagPrefix="uc1" TagName="popup1Component" %>
<asp:Content ID="Content2" ContentPlaceHolderID="bodyMaster" runat="server">
    ...
    <div>
    ...
    </div>
    <div id="popup1" class="popup1" style="visibility: hidden;">
        <div class="popup1Div">
        <button style="float: right" onclick="ClosePopupWithCloseButtonOrESC(); return false;">Close</button>
        <asp:Button ID="closePopupButton" runat="server" style="visibility: hidden" Text="Close" OnClick="ClosePopupButton_Click" ClientIDMode="Static" />
        <br />
        <br />
        <asp:UpdatePanel ID="popup1UpdatePanel" runat="server" UpdateMode="Always">
            <ContentTemplate>
                <asp:Label ... />
            </ContentTemplate>
        </asp:UpdatePanel>
        <uc1:popup1Component runat="server" ID="popup1Component" />
        </div>
    </div>
</asp:Content>

以及点击某些按钮后设置弹出窗口可见性的 Javascript 代码...

Answer 1

我上次的做法是：

1. 您为打开第二个弹出窗口 (onclick) 的元素创建一个 eventHandler
2. 您正在创建一个背景颜色为灰色且不透明度为 0.7 的 div，并将其附加到正文中。 Yoz 通过 css 全宽和全高给它。将 z 顺序置于所有元素之上。
3. popup2 显然应该是这个 div 之上的 z-order

代码应该很简单，所以我把它留给你。