javascript / CSS - 阻止单击上次打开弹出窗口外的元素(按钮)和上次打开弹出窗口外部的所有灰色元素(按钮

Question

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

我想让它看起来像这样...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 - 弹出窗口 1 的组件（显示弹出窗口 2）

<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 - 页面代码（显示弹出窗口 1）

<%@ 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）
2. 您正在创建一个具有背景颜色灰色和不透明度（比方说）.7 的div，并将其附加到正文中。Yoz通过css全宽和高度给它。在所有元素之上按 z 顺序排列。
3. popup2 显然应该在这个div 之上成为 z 顺序

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