jQuery Mobile: Popup transitions

This entry is part 65 of 73 in the series jQuery Mobile

Generally, we want the popup to be fast and simple.  But if you are keen, you can add some transition effects such as slide and fade to the popup.

To set the transition used for a popup, add the data-transition attribute to the link that references the popup.

The reverse transition will be used when closing the popup.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header' data-theme='b'>
        <h1>Welcome To My Popup Transition App</h1>
    </div>

    <div data-role='content' style='text-align: center'>
        <a href='#transitionExample' data-transition='none' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>No transition</a>
        <a href='#transitionExample' data-transition='pop' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>Pop</a>
        <a href='#transitionExample' data-transition='fade' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>Fade</a>
        <a href='#transitionExample' data-transition='flip' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>Flip</a>
        <a href='#transitionExample' data-transition='turn' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>Turn</a>
        <a href='#transitionExample' data-transition='flow' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>Flow</a>
        <a href='#transitionExample' data-transition='slide' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>Slide</a>
        <a href='#transitionExample' data-transition='slidefade' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>Slidefade</a>
        <a href='#transitionExample' data-transition='slideup' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>Slide up</a>
        <a href='#transitionExample' data-transition='slidedown' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup'>Slide down</a>
        <div data-role='popup' id='transitionExample' class='ui-content' data-theme='a'>
            <p>I'm a simple popup.</p>
        </div>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code
Series Navigation<< jQuery Mobile: Popup positioning
jQuery Mobile: Basic drop down or select menu >>