Show and Hide ModalPopupExtender from JavaScript


1) Assign a BehaviourID to the ModalPopupExtender using the BehaviourID attribute.

BehaviorID =“ModalBehaviour”



2) Use the $find method to get a handle to the Modal Popup Behaviour .

$find (“ModalBehaviour”).



3) Call your hide and show methods on the acquired handle.

4) The Javascript would look like this.

 


<script language=“javascript”> 

function ShowModalPopup()
{
$find(“ModalBehaviour”).show();
}

function HideModalPopup()
{
$find(“ModalBehaviour”).hide();
}

</script>


Comments (31)

  1. Alan Grant says:

    I was having trouble $find()ing my modal popup extender by it’s ID. The behaviour ID worked great. THANKS !

  2. Alan says:

    This just doesn’t work.  I get null is null or not an object when the find command executes.  I did a straight copy of this example, pasted it into my project.  I changed the BehaviorID, but other than that its verbatum.

  3. PhaniRajuYN says:

    Hi Alan,

    Looks like the FIND Method is failing to get the Behavior.

    Can you please mail me a sample repro so that  I can look into it ?

    Please Use the contact form .

    Thanks,

    Raj

  4. zootius says:

    I had the same prob getting a “null” handle when doing the $find() during the OnLoad client event – seems that AJAX.NET hadn’t finished creating the object at that point.

    So I did “window.setTimeout(jsMyFunction, 500)” instead and put my $find() in jsMyFunction(). Then it worked ok. Trying to find a neater solution but no joy yet….

  5. PhaniRajuYN says:

    Hi Zootius,

    In the JavaScript code, there is a pageLoad method which will be called automatically by the ASP.NET AJAX script library.

    This is called after all the framework scripts and components are intialized.

    An example would be ,

    function pageLoad()

    {

    var cachedModalBehavior = $find("ModalBehaviour");

    }

    Hope this helps.

    Thanks,

    Raj

  6. JamieHammond says:

    Thankyou Thankyou Thankyou, ive just spent 2 days trying to figure this out but your example worked first time for me, did is say thankyou?!

  7. PhaniRajuYN says:

    Hi Jamie ,

    Glad I could help you out :-)

  8. Jayran says:

    Hi,I am having the same problem.In the pageLoad I am getting null.Any adea??

    I have multiple links on a page and I want to use only one panel on each link as popup.

    Please…thanks,Jayran

  9. PhaniRajuYN says:

    Hi Jayran,

    Can you use the Contact form to  drop me a sample of your code ? I will look into it to see the issue

    Thanks,

    Raj

  10. PhaniRajuYN says:

    Hi Jayran,

    Once the ASPX is rendered , can you please do a "View Source" on the Page and give me the "$create" function call for the ModalPopupExtender ?

    Thanks,

    Raj

  11. Jayran says:

    Hi Raj,

    In the viewsource there is no create function for ModalPopupExtender.It has this:

    (function() {var fn = function() {AjaxControlToolkit.ModalPopupBehavior.invokeViaServer(‘_modalExt’, true); Sys.Application.remove_load(fn);};Sys.Application.add_load(fn);})();Sys.Application.initialize();

    where _modalExt is the behaviourId. Am I doing something wrong??

    thanks

  12. Jayran says:

    When I added OnOkScript="onOk(null)" to the extender now I got it like this:

    Sys.Application.add_init(function() {

       $create(AjaxControlToolkit.ModalPopupBehavior, {"BackgroundCssClass":"modalBackground","CancelControlID":"_btnCancel","DropShadow":true,"DynamicServicePath":"/Trans/Aircraft/forms/form.aspx","OkControlID":"_btnOK","OnOkScript":"onOk(u0027crewu0027);","PopupControlID":"_panelComments","id":"_modalExtComments"}, null, null, $get("_btnCrewComments"));

    });

  13. sarvanan says:

    It seems like if whatever control the TargetControlID points to is hidden (visible=’false’), then the modal popup extender is not created.  Is it a bug?

  14. PhaniRajuYN says:

    Hi Saravanan,

    When you set "visible = false" on a server-Side Control , the control is not rendered.

    An Extender is supposed to "extend" a control .If the Control is not rendered , what will it "extend" ?

    To hide a control , set the style attribute to have "display:none".

    EX: txtSomething.Attributes["style"] ="display:none" ;

    Hope this helps

  15. sarvanan says:

    It makes sense.. but here the ModalPopup is shown during the pageLoad and it not necessarily get attached to any control to invoke it.

    Click a Button -> Show Modal Popup : Here the button control’s click event fires the trigger. So we can say the ‘button’ is extended.

    Page Load -> Show Modal Popup: Custom script in pageLoad fires the trigger.  No control is needed.  

    No harm of keeping a button with display:none as you said to achieve the purpose, but it will be clean if we have this option too, specifically for this extender.

  16. PhaniRajuYN says:

    Hi Saravanan,

    Your requirement seems to have weight .

    can you please submit a work-item for the same over at codeplex ?

    The link is

    http://www.codeplex.com/AtlasControlToolkit/WorkItem/Create.aspx

    This should help someone who is looking for a similar functionality.

    and yes, thanks for sharing this with me .

  17. Jayran says:

    Hi PhaniRajuYN,

    I got it working with Javascript.Thanks.

    I have a new problem…need your help..

    I have a modal popup with updatepanel.the popup shows search results in a repeater basd on user input. modal popup shows up, without a fliker I get the results but …

    If I click cancel the pages dropdown boxes disappear…. even though the popup hides…

    Any idea?? Thanks.

  18. Raja Sekhar says:

    Hi,

      The apporoach is working fine after the page is loaded. But i want to display the modal pop extender on post back of the page. I am trying to call the javascript function which is being called on body OnLoad event. The Extender object returns null. Is there any way to resolve this kind of situation.

    Thanks in Advance.

    Please post any solutions to sekhar.raja@gmail.com

    Regards,

    Raja Sekhar.

  19. PhaniRajuYN says:

    Hi Raja Shekar,

    Please read My reply to zootius about the same.Its the 5th Comment from the top .basically , its about creating a function called pageLoad() and accessing the extenders there.

    EX:

    function pageLoad() {

    var cachedModalBehavior = $find("ModalBehaviour");

    }

    Hope this Helps!

    Thanks,

    Raj

  20. Iván says:

    Hi all,

       First of all I must say that it’s a very good post. And now my question, of course. I try your code and it’s works but I ask myself how could I get the ok/cancel button in the modal popup. I have a modal popup with an advertising text and two buttons, Acept and Cancel. I want that my JavaScript code return true or false depends on what button was clicked. I need it because I want to execute some server-side code so I need a postback with the button that was clicked but ajax extender does not propagate the event and The server-side handler never execute.

    Any idea?

    Best regards,

  21. PhaniRajuYN says:

    Hi Ivan,

    I am not sure I understand you correctly .

    You can place HTMLInput Buttons in the PopupControl and have them call the JavaScript to hide the MPE .

    Once the HtmlInput Buttons call the Function to hide() , you could cause a postback using __dopostback and execute code on the server.

    Lemme know if I have misunderstood the concern.

    Thanks,

    Raj

  22. Darcy says:

    Hi,

    I am haing the same problem that Jayran has posted previously.

    My page has some dropdowns and some buttons. On click event of one of the button, modal popup shows up. It works perfectly. When I am done with the modal popup, I hide it. However, my dropdowns on the main page are disappeared. How can I get those dropdowns back?

    Please, help!

  23. PhaniRajuYN says:

    Hello Darcy,

    When the Modal Popup shows up , it creates an iframe at the same position so that it stands above all the controls. When you hide the control , the iframe is also supposed to be hidden.

    Strange that this isnt the case with your app.

    Can you drop me a sample repro using the "Contact Me" link .

    I will take a look at it.

  24. Dede says:

    It seems I am having trouble with the JavaScript call. I created the BehaviorID, and I am doing the $find() call in my PageLoad function, but nothing happens. I still have the TargetControlID= to a button, is that correct?

    Can you please supply me with code that has the JavaScript and ModalPopupExtender?

    Thanks in advance,

    Dede

  25. Anosh says:

    Just put .Show() in the _Load function of the .cs file:

       protected void Page_Load(object sender, EventArgs e)

       {

           ModalPopupExtender3.Show();

       }

    [PhaniRaj]
    Anosh , Please take a few minutes to read the title of the Post.
    It says “how to open MPE from JAVASCRIPT”.

  26. Padma says:

    helloooo….

    can any one tell me whats the sloution for  getting the drop downs back again

    Thanks in advance

  27. PhaniRajuYN says:

    Hi Padma,

    Please post your question on the atk forums at :

    http://forums.asp.net/1022.aspx

    -Phani

  28. dotnetsam says:

    The BehaviorId was great great great great idea …

    saman

  29. BIlal Qureshi says:

    Thank you for the BehaviorId tip. It worked like a charm. Thank you!!!!!

  30. Mantu Samal says:

    Use Jquery to use the $find() function and Set the BehaviourID in AjaxModalpopupExtender

    Great. Works Nice.