CODEWITHSUNDEEP
c#asp.netajax
Parthasarthi B.K
Parthasarthi B.K

Reputation: 45

How to hide and view ModalPopupExtender?

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;
    }
}

EDIT : 

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" 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:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="XX-Large" Text="Automated Examination System"></asp:Label><br />&nbsp;<br /><br />&nbsp;
    <asp:Panel ID = "Main" runat = "server" Height="181px" Width="275px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <ul>
    <li style="margin-left: 33px; width: 169px;">&nbsp;<asp:LinkButton ID = "LinkAdmin" runat = "server" onclick="LinkAdmin_Click">Coordinator</asp:LinkButton></li>
    <li style="width: 172px; margin-left: 33px">&nbsp;<asp:LinkButton ID="LinkStaff" runat="server" onclick="LinkStaff_Click">Staff</asp:LinkButton></li>
    <li style="margin-left: 33px">&nbsp;<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="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" Visible = "false" runat="server" Height="48px" Width="274px">
        Staff SP<br />
        <asp:modalpopupextender ID="Modalpopupextender1" CancelControlID = "Button8" TargetControlID = "Button2" PopupControlID = "StaffSP" runat="server"></asp:modalpopupextender>
        <asp:Button ID="Button7" runat="server" Text="Button" />
        <asp:Button ID="Button8" runat="server" Text="Cancel" />
    </asp:Panel>
    <asp:Panel ID="StaffFP" Visible = "false" runat="server" Height="48px" Width="274px">
        Staff FP<br />
        <asp:modalpopupextender ID="Modalpopupextender2" CancelControlID = "Button10" TargetControlID = "Button3" PopupControlID = "StaffFP" runat="server"></asp:modalpopupextender>
        <asp:Button ID="Button9" runat="server" Text="Button" />
        <asp:Button ID="Button10" runat="server" Text="Cancel" />
        <br />
        <br />
    </asp:Panel>
    <asp:Panel ID="AdminSP" Visible = "false" runat="server" Height="48px" Width="274px">
        Admin SP<br />
        <asp:modalpopupextender ID="Modalpopupextender4" CancelControlID = "Button14" TargetControlID = "Button6" PopupControlID = "AdminSP" runat="server"></asp:modalpopupextender>
        <asp:Button ID="Button11" runat="server" Text="Button" />
        <asp:Button ID="Button12" runat="server" Text="Cancel" />
        <br />
        <br />
    </asp:Panel>
    <asp:Panel ID="AdminFP" Visible = "false" runat="server" Height="48px" Width="274px">
        AdminFP<br />
        <asp:modalpopupextender ID="Modalpopupextender3" CancelControlID = "Button12" TargetControlID = "Button5" PopupControlID = "AdminFP" runat="server"></asp:modalpopupextender>
        <asp:Button ID="Button13" runat="server" Text="Button" />
        <asp:Button ID="Button14" runat="server" Text="Cancel" />

    </asp:Panel>

    </form>
</body>
</html>

Upvotes: 0

Views: 1974

Answers (2)

Rojalin Sahoo
Rojalin Sahoo

Reputation: 1025

Call your css class hide panel in every PopupControl used for modalpopupextender control:

  `<asp:Panel ID="StaffSP" runat="server" CssClass="hide" 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" style="display:none;">
    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">
    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" Visible="false">
    AdminFP<br />
    <asp:Button ID="Button13" runat="server" Text="Button" />
    <asp:Button ID="Button14" runat="server" Text="Cancel" />

</asp:Panel>`

Upvotes: 1

user3077222
user3077222

Reputation: 99

you have put all the 4 TargetControlIDs inside the panels which are not visible

Upvotes: 1

Related Questions