Solved

ModalPopupExtender not working from code behind

Posted on 2014-04-22
7
624 Views
Last Modified: 2014-04-22
Hi all,

I'm trying to invoke a modal popup on a gridview to change user passwords. The modal isn't appearing though? can anyone tell me what I am doing wrong here;

    <asp:HyperLink ID="DummyButton" runat="server" Style="display: none;" />

    <asp:ModalPopupExtender ID="PasswordModalPopupExtender" TargetControlID="DummyButton" PopupControlID="PasswordPopup" runat="server" DropShadow="true" Enabled="true">
    </asp:ModalPopupExtender>
    
    <asp:Panel id="PasswordPopup" runat="server" style="display:none;">
        <asp:ChangePassword ID="ChangePasswordControl" runat="server"></asp:ChangePassword>
    </asp:Panel>

Open in new window


and on the gridview i am capturing the  OnSelectedIndexChanged="OnSelectedIndexChanged"

        ChangePasswordControl.UserName = UserList.SelectedRow.Cells[1].Text;
        FeedbackLabel.Text = "Changing Password for " + UserList.SelectedRow.Cells[1].Text;
        PasswordModalPopupExtender.Show();

Open in new window


now all is firing and the FeedbackLabel is displaying the correct info but the modal doesnt appear?
0
Comment
Question by:flynny
  • 4
  • 3
7 Comments
 
LVL 7

Expert Comment

by:Utkarsh Kulkarni
ID: 40014412
It may be invoking the popup. Just to make sure it get displaying or not, set BackgroundCssClass property.
Also, if it is inside update panel, make sure, both (grid and ModalPopupExtender) should be in same update panel.
0
 

Author Comment

by:flynny
ID: 40014468
Thanks for the reply.

Will not setting the BackgroundCssClass cause issues? Could you suggest what I should put in here for testing?

The modal is not inside anupdate panel and is just in a standard aspx page with a masterpage.
0
 
LVL 7

Expert Comment

by:Utkarsh Kulkarni
ID: 40014521
BackgroundCssClass is an optional attribute. But the css or default setting can do this.
Also, try to access the page in FF & open the Java console to see is there any script error.
Sample CSS

.popup_block{
      display: none; /*--hidden by default--*/
      float: left;
      font-size: 1.2em;
      position: fixed;
      top: 9%; left: 30%;
      z-index: 99999;      
}
.modal_Background
{
      background-color:#CCCCCC;
      filter:alpha(opacity=90);
      opacity:0.9;
      }
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:flynny
ID: 40014638
as far as I can see there are no errors?

    <asp:ModalPopupExtender ID="PasswordModalPopupExtender" TargetControlID="DummyButton" PopupControlID="PasswordPopup" BackgroundCssClass="tmodal_Background" runat="server" DropShadow="true" Enabled="true">
    </asp:ModalPopupExtender>
    
    <asp:Panel id="PasswordPopup" runat="server" CssClass="tpopup_block">
        <asp:ChangePassword ID="ChangePasswordControl" runat="server"></asp:ChangePassword>
    </asp:Panel>

Open in new window


and css is;

.tpopup_block{
      display: none; /*--hidden by default--*/
      float: left;
      font-size: 1.2em;
      position: fixed;
      top: 9%; left: 30%;
      z-index: 99999;      
}
.tmodal_Background
{
      background-color:#CCCCCC;
      filter:alpha(opacity=90);
      opacity:0.9;
      } 

Open in new window


if I user firebug I can drill down and see the panel is being rendered?

any idea?
0
 
LVL 7

Expert Comment

by:Utkarsh Kulkarni
ID: 40014732
You can check using firebug.
What AjaxControl Toolkit version are you using ?
0
 
LVL 7

Accepted Solution

by:
Utkarsh Kulkarni earned 500 total points
ID: 40014763
Hi,

here is the sample code
 <style>
            .tpopup_block {
                display: none; /*--hidden by default--*/
                float: left;
                font-size: 1.2em;
                position: fixed;
                top: 20%;
                left: 30%;
                z-index: 99999;
                color: #ff0000;
            }

            .tpopup_block_click {
                float: left;
                font-size: 1.2em;
                position: fixed;
                top: 20%;
                left: 30%;
                z-index: 99999;
                color: #ff0000;
            }

            .tmodal_Background {
                background-color: #CCCCCC;
                filter: alpha(opacity=90);
                opacity: 0.9;
            }
        </style>
        <div>
            <asp:ScriptManager runat="server" ID="sm"></asp:ScriptManager>
            <asp:Button ID="bbb" runat="server" OnClick="bbb_Click" Text="Test" />
            <asp:HyperLink ID="DummyButton" runat="server" Style="display: none;" />
            <cc1:ModalPopupExtender ID="PasswordModalPopupExtender" TargetControlID="DummyButton" PopupControlID="PasswordPopup" BackgroundCssClass="tmodal_Background" runat="server" DropShadow="true" Enabled="true">
            </cc1:ModalPopupExtender>
            <asp:Panel ID="PasswordPopup" runat="server" CssClass="tpopup_block">
                <h1>Sample Text</h1>
            </asp:Panel>
        </div>

Open in new window


protected void bbb_Click(object sender, EventArgs e)
        {
            PasswordPopup.CssClass = "tpopup_block_click";
            PasswordModalPopupExtender.Show();
        }

Open in new window


Check this on single page first & then modify for Master Page / Content place holder
0
 

Author Comment

by:flynny
ID: 40014829
hi there.

this still was not working. So as I am really only showing this from the server side I have just removed the popupcontrol and set a panel to be visible=true on the click.

this works well and removes the bloated popupextender control.

thanks for all the help though.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

More often than not, we developers are confronted with a need: a need to make some kind of magic happen via code. Whether it is for a client, for the boss, or for our own personal projects, the need must be satisfied. Most of the time, the Framework…
A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
This Micro Tutorial will teach you how to censor certain areas of your screen. The example in this video will show a little boy's face being blurred. This will be demonstrated using Adobe Premiere Pro CS6.
Migrating to Microsoft Office 365 is becoming increasingly popular for organizations both large and small. If you have made the leap to Microsoft’s cloud platform, you know that you will need to create a corporate email signature for your Office 365…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now