Solved

ModalPopupExtender not working from code behind

Posted on 2014-04-22
7
682 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Increase Agility with Enabled Toolchains

Connect your existing build, deployment, management, monitoring, and collaboration platforms. From Puppet to Chef, HipChat to Slack, ServiceNow to JIRA, Splunk to New Relic and beyond, hand off data between systems to engage the right people.

Connect with xMatters.

 

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

Containers & Docker to Create a Powerful Team

Containers are an incredibly powerful technology that can provide you and/or your engineering team with huge productivity gains. Using containers, you can deploy, back up, replicate, and move apps and their dependencies quickly and easily.

Question has a verified solution.

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

Entity Framework is a powerful tool to help you interact with the DataBase but still doesn't help much when we have a Stored Procedure that returns more than one resultset. The solution takes some of out-of-the-box thinking; read on!
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
In this video, viewers are given an introduction to using the Windows 10 Snipping Tool, how to quickly locate it when it's needed and also how make it always available with a single click of a mouse button, by pinning it to the Desktop Task Bar. Int…
Michael from AdRem Software explains how to view the most utilized and worst performing nodes in your network, by accessing the Top Charts view in NetCrunch network monitor (https://www.adremsoft.com/). Top Charts is a view in which you can set seve…

717 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