jQuery Mobile Popup Close Transition SlideDown

Question

I am trying to perform a slide down transition for a jQuery Mobile Popup. I am using the following implementation:

  $(element).click(function () {


                   


        

Answer 1

A corresponding jsFiddle showing the full answer can be found here: jsFiddle Sample

What you will find there will be sample HTML:

Show Popup

    

        Hello from my popup
        Close
    

And JavaScript here:

jQuery("#MyButton").on("click", function () {
    jQuery("#MyPopup").popup({
        transition: "slideup"
    }).popup("open");
    jQuery("#CloseButton").on("click", function () {
        jQuery.mobile.back();
    });
});

The high level is that by using the jQuery Mobile back() method, the inverse transition will occur automatically for the hiding of the popup. If you are handling your own close with a button, the same is also true.

Have a look at the jsFiddle and test that it works for you.