Solved

ModalPopupExtender not working from code behind

Posted on 2014-04-22
7
631 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

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…
This article aims to explain the working of CircularLogArchiver. This tool was designed to solve the buildup of log file in cases where systems do not support circular logging or where circular logging is not enabled
This Micro Tutorial hows how you can integrate  Mac OSX to a Windows Active Directory Domain. Apple has made it easy to allow users to bind their macs to a windows domain with relative ease. The following video show how to bind OSX Mavericks to …
Sending a Secure fax is easy with eFax Corporate (http://www.enterprise.efax.com). First, just open a new email message. In the To field, type your recipient's fax number @efaxsend.com. You can even send a secure international fax — just include t…

813 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

11 Experts available now in Live!

Get 1:1 Help Now