本文介绍了如何隐藏和查看ModalPopupExtender？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在项目的启动页面中使用了4个Modalpopupextender。当我运行启动页面时，即使在单击指定的TargetControlID之前，我在Modalpopupextender中的PopupControlID下设置的面板也是可见的。我试图将那些可见的设置为false，但它有助于我，我还尝试创建一个css类来在加载页面时隐藏面板，并在单击指定按钮时查看面板但它既没有帮助我。请帮忙。谢谢。
I am using 4 Modalpopupextender in my start-up page of my project. When I run my start-up page, the panels which I have set under PopupControlID in Modalpopupextender are visible even before the specified TargetControlID is clicked. I have tried to set visible of those to false but it dint helped me and I also tried to create a css class to hide a panel when page is loaded and to view the panel when specified button is clicked but it neither helped me. Please help. Thank you.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type = "text/css">
.hidePanel
{
display:none;
}
.showpanel
{
display : block;
}
.panel
{
background : gray;
padding : 10px;
}
div ul ul
{
display: none;
}
div ul li:hover > ul
{
display: block;
}
div ul li ul:hover > ul
{
display: block;
}
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:modalpopupextender ID="Modalpopupextender1" CancelControlID = "Button8" TargetControlID = "Button2" PopupControlID = "StaffSP" runat="server"></asp:modalpopupextender>
<asp:modalpopupextender ID="Modalpopupextender2" CancelControlID = "Button10" TargetControlID = "Button3" PopupControlID = "StaffFP" runat="server"></asp:modalpopupextender>
<asp:modalpopupextender ID="Modalpopupextender3" CancelControlID = "Button12" TargetControlID = "Button5" PopupControlID = "AdminSP" runat="server"></asp:modalpopupextender>
<asp:modalpopupextender ID="Modalpopupextender4" CancelControlID = "Button14" TargetControlID = "Button6" PopupControlID = "AdminSP" runat="server"></asp:modalpopupextender>
<asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="XX-Large" Text="Automated Examination System"></asp:Label><br /> <br /><br />
<asp:Panel ID = "Main" runat = "server" Height="181px" Width="275px">
<ul>
<li style="margin-removed 33px; width: 169px;"> <asp:LinkButton ID = "LinkAdmin" runat = "server" onclick="LinkAdmin_Click">Coordinator</asp:LinkButton></li>
<li style="width: 172px; margin-removed 33px"> <asp:LinkButton ID="LinkStaff" runat="server" onclick="LinkStaff_Click">Staff</asp:LinkButton></li>
<li style="margin-removed 33px"> <asp:LinkButton ID = "LinkStudent" runat = "server">Student</asp:LinkButton>
<ul>
<li><asp:LinkButton ID = "LinkButton1" runat = "server">Fresh Registration</asp:LinkButton></li>
<li><asp:LinkButton ID = "LinkButton2" runat = "server">Re Registration</asp:LinkButton></li>
</ul>
</li>
</ul>
</asp:Panel>
</div>
<asp:Panel ID="StaffLogin" runat="server" Height="59px"
style="z-index: 1; left: 302px; top: 112px; position: absolute; height: 59px; width: 275px"
Visible="False" Width="275px">
Staff<br />
<asp:Button ID="Button1" runat="server" Text="Login" />
<asp:Button ID="Button2" runat="server" Text="New Staff" />
<asp:Button ID="Button3" runat="server" Text="Fogot Password" />
</asp:Panel>
<asp:Panel ID="AdminLogin" runat="server"
style="z-index: 1; left: 302px; top: 193px; position: absolute; height: 78px; width: 275px"
Visible="False" Width="275px">
Admin<br />
<asp:Button ID="Button4" runat="server" Text="Login" />
<asp:Button ID="Button5" runat="server" Text="New Admin" />
<asp:Button ID="Button6" runat="server" Text="Forgot Password" />
</asp:Panel>
<asp:Panel ID="StaffSP" runat="server" Height="48px" Width="274px">
Staff SP<br />
<asp:Button ID="Button7" runat="server" Text="Button" />
<asp:Button ID="Button8" runat="server" Text="Cancel" />
</asp:Panel>
<asp:Panel ID="StaffFP" runat="server" Height="48px" Width="274px">
Staff FP<br />
<asp:Button ID="Button9" runat="server" Text="Button" />
<asp:Button ID="Button10" runat="server" Text="Cancel" />
<br />
<br />
</asp:Panel>
<asp:Panel ID="AdminSP" runat="server" Height="48px" Width="274px">
Admin SP<br />
<asp:Button ID="Button11" runat="server" Text="Button" />
<asp:Button ID="Button12" runat="server" Text="Cancel" />
<br />
<br />
</asp:Panel>
<asp:Panel ID="AdminFP" runat="server" Height="48px" Width="274px">
AdminFP<br />
<asp:Button ID="Button13" runat="server" Text="Button" />
<asp:Button ID="Button14" runat="server" Text="Cancel" />
</asp:Panel>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class TrailPopup : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void LinkAdmin_Click(object sender, EventArgs e)
{
AdminLogin.Visible = true;
StaffLogin.Visible = false;
}
protected void LinkStaff_Click(object sender, EventArgs e)
{
AdminLogin.Visible = false;
StaffLogin.Visible = true;
}
}
推荐答案
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
.hidePanel
{
display:none;
}
.showpanel
{
display : block;
}
.panel
{
background : gray;
padding : 10px;
}
div ul ul
{
display: none;
}
div ul li:hover > ul
{
display: block;
}
div ul li ul:hover > ul
{
display: block;
}
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:scriptmanager id="ScriptManager1" runat="server" xmlns:asp="#unknown"></asp:scriptmanager>
<asp:modalpopupextender id="Modalpopupextender1" cancelcontrolid="Button8" targetcontrolid="Button2" popupcontrolid="StaffSP" runat="server" xmlns:asp="#unknown"></asp:modalpopupextender>
<asp:modalpopupextender id="Modalpopupextender2" cancelcontrolid="Button10" targetcontrolid="Button3" popupcontrolid="StaffFP" runat="server" xmlns:asp="#unknown"></asp:modalpopupextender>
<asp:modalpopupextender id="Modalpopupextender3" cancelcontrolid="Button12" targetcontrolid="Button5" popupcontrolid="AdminSP" runat="server" xmlns:asp="#unknown"></asp:modalpopupextender>
<asp:modalpopupextender id="Modalpopupextender4" cancelcontrolid="Button14" targetcontrolid="Button6" popupcontrolid="AdminSP" runat="server" xmlns:asp="#unknown"></asp:modalpopupextender>
<asp:label id="Label1" runat="server" font-bold="True" font-names="Arial" font-size="XX-Large" text="Automated Examination System" xmlns:asp="#unknown"></asp:label><br /> <br /><br />
<asp:panel id="Main" runat="server" height="181px" width="275px" xmlns:asp="#unknown">
<ul>
<li style="margin-removed: 33px; width: 169px;"> <asp:linkbutton id="LinkAdmin" runat="server" onclick="LinkAdmin_Click">Coordinator</asp:linkbutton></li>
<li style="width: 172px; margin-removed: 33px"> <asp:linkbutton id="LinkStaff" runat="server" onclick="LinkStaff_Click">Staff</asp:linkbutton></li>
<li style="margin-removed: 33px"> <asp:linkbutton id="LinkStudent" runat="server">Student</asp:linkbutton>
<ul>
<li><asp:linkbutton id="LinkButton1" runat="server">Fresh Registration</asp:linkbutton></li>
<li><asp:linkbutton id="LinkButton2" runat="server">Re Registration</asp:linkbutton></li>
</ul>
</li>
</ul>
</asp:panel>
</div>
<asp:panel id="StaffLogin" runat="server" height="59px" xmlns:asp="#unknown">
style="z-index: 1; left: 302px; top: 112px; position: absolute; height: 59px; width: 275px"
Visible="False" Width="275px">
Staff<br />
<asp:button id="Button1" runat="server" text="Login" />
<asp:button id="Button2" runat="server" text="New Staff" />
<asp:button id="Button3" runat="server" text="Fogot Password" />
</asp:panel>
<asp:panel id="AdminLogin" runat="server" xmlns:asp="#unknown">
style="z-index: 1; left: 302px; top: 193px; position: absolute; height: 78px; width: 275px"
Visible="False" Width="275px">
Admin<br />
<asp:button id="Button4" runat="server" text="Login" />
<asp:button id="Button5" runat="server" text="New Admin" />
<asp:button id="Button6" runat="server" text="Forgot Password" />
</asp:panel>
<asp:panel id="StaffSP" runat="server" height="48px" width="274px" CssClass="hidePanel" xmlns:asp="#unknown"><![CDATA[<%--/Here you missed visible false.--%>
Staff SP<br />
<asp:button id="Button7" runat="server" text="Button" />
<asp:button id="Button8" runat="server" text="Cancel" />
</asp:panel>
<asp:panel id="StaffFP" runat="server" height="48px" width="274px" CssClass="hidePanel" xmlns:asp="#unknown"><![CDATA[<%--Here you missed visible false.--%>
Staff FP<br />
<asp:button id="Button9" runat="server" text="Button" />
<asp:button id="Button10" runat="server" text="Cancel" />
<br />
<br />
</asp:panel>
<asp:panel id="AdminSP" runat="server" height="48px" width="274px" CssClass="hidePanel" xmlns:asp="#unknown"> <%--/Here you missed visible false. --%>
Admin SP<br />
<asp:button id="Button11" runat="server" text="Button" />
<asp:button id="Button12" runat="server" text="Cancel" />
<br />
<br />
</asp:panel>
<asp:panel id="AdminFP" runat="server" height="48px" width="274px" CssClass="hidePanel" xmlns:asp="#unknown"> <%--/Here you missed visible false.--%>
AdminFP<br />
<asp:button id="Button13" runat="server" text="Button" />
<asp:button id="Button14" runat="server" text="Cancel" />
</asp:panel>
</head></html><html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style type="text/css">
.modalBackground
{
background-color: Black;
}
.modalPopup
{
background-color: #FFFFFF;
border-width: 3px;
border-style: solid;
border-color: black;
padding-top: 10px;
padding-left: 10px;
width: 300px;
height: 140px;
}
.hidePanel
{
display:none;
}
.showpanel
{
display : block;
}
.panel
{
background : gray;
padding : 10px;
}
div ul ul
{
display: none;
}
div ul li:hover > ul
{
display: block;
}
div ul li ul:hover > ul
{
display: block;
}
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:scriptmanager id="ScriptManager1" runat="server" xmlns:asp="#unknown"></asp:scriptmanager>
<asp:label id="Label1" runat="server" font-bold="True" font-names="Arial" font-size="XX-Large" text="Automated Examination System" xmlns:asp="#unknown"></asp:label><br /> <br /><br />
<asp:panel id="Main" runat="server" height="181px" width="275px" xmlns:asp="#unknown">
<ul>
<li style="margin-removed 33px; width: 169px;"> <asp:linkbutton id="LinkAdmin" runat="server" onclick="LinkAdmin_Click">Coordinator</asp:linkbutton></li>
<li style="width: 172px; margin-removed 33px"> <asp:linkbutton id="LinkStaff" runat="server" onclick="LinkStaff_Click">Staff</asp:linkbutton></li>
<li style="margin-removed 33px"> <asp:linkbutton id="LinkStudent" runat="server">Student</asp:linkbutton>
<ul>
<li><asp:linkbutton id="LinkButton1" runat="server">Fresh Registration</asp:linkbutton></li>
<li><asp:linkbutton id="LinkButton2" runat="server">Re Registration</asp:linkbutton></li>
</ul>
</li>
</ul>
</asp:panel>
</div>
<asp:panel id="StaffLogin" runat="server" height="59px" style="z-index: 1; left: 302px; top: 112px; position: absolute; height: 59px; width: 275px" visible="False" width="275px" xmlns:asp="#unknown">Staff<br />
<asp:button id="Button1" runat="server" text="Login" />
<asp:button id="Button2" runat="server" text="New Staff" />
<asp:button id="Button3" runat="server" text="Fogot Password" />
</asp:panel>
<asp:panel id="AdminLogin" runat="server" style="left: 302px; top: 193px; position: absolute; height: 78px; width: 275px" visible="False" width="275px" xmlns:asp="#unknown">Admin<br />
<asp:button id="Button4" runat="server" text="Login" />
<asp:button id="Button5" runat="server" text="New Admin" />
<asp:button id="Button6" runat="server" text="Forgot Password" />
</asp:panel>
<asp:panel id="StaffSP" style="display: none" runat="server" height="48px" width="274px" xmlns:asp="#unknown">
Staff SP<br /><asp:button id="Button7" runat="server" text="Button" />
<asp:button id="Button8" runat="server" text="Cancel" />
</asp:panel>
<asp:panel id="StaffFP" style="display: none" runat="server" height="48px" width="274px" xmlns:asp="#unknown">
Staff FP<br />
<asp:button id="Button9" runat="server" text="Button" />
<asp:button id="Button10" runat="server" text="Cancel" />
<br />
<br />
</asp:panel>
<asp:panel id="AdminSP" style="display: none" runat="server" height="48px" width="274px" xmlns:asp="#unknown">
Admin SP<br />
<asp:button id="Button11" runat="server" text="Button" />
<asp:button id="Button12" runat="server" text="Cancel" />
<br />
<br />
</asp:panel>
<asp:panel id="AdminFP" style="display: none" cssclass="modalPopup" runat="server" height="48px" width="274px" xmlns:asp="#unknown">
AdminFP<br />
<asp:button id="Button13" runat="server" text="Button" />
<asp:button id="Button14" runat="server" text="Cancel" />
</asp:panel>
<asp:modalpopupextender id="Modalpopupextender1" cancelcontrolid="Button8" targetcontrolid="Button2" popupcontrolid="StaffSP" backgroundcssclass="modalBackground" runat="server" xmlns:asp="#unknown"></asp:modalpopupextender>
<asp:modalpopupextender id="Modalpopupextender2" cancelcontrolid="Button10" targetcontrolid="Button3" popupcontrolid="StaffFP" backgroundcssclass="modalBackground" runat="server" xmlns:asp="#unknown"></asp:modalpopupextender>
<asp:modalpopupextender id="Modalpopupextender3" cancelcontrolid="Button12" targetcontrolid="Button5" popupcontrolid="AdminFP" backgroundcssclass="modalBackground" runat="server" xmlns:asp="#unknown"></asp:modalpopupextender>
<asp:modalpopupextender id="Modalpopupextender4" cancelcontrolid="Button14" targetcontrolid="Button6" popupcontrolid="AdminSP" backgroundcssclass="modalBackground" runat="server" xmlns:asp="#unknown"></asp:modalpopupextender>
</form>
</body>
</html>这篇关于如何隐藏和查看ModalPopupExtender？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！