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:

<button id="MyButton">Show Popup</button>
<div data-role="popup" id="MyPopup">
    <div class="ui-content">
        Hello from my popup
        <button id="CloseButton">Close</button>
    </div>
</div>

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.