jQuery Mobile: Popup positioning

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

By default, popups open centered vertically and horizontally over the element you clicked (the origin) which is good for popups used as tooltips or menus.

If a popup should appear centered within the window instead of over the origin, add the data-position-to attribute to the link and specify a value of window.

It’s also possible to specify any valid selector as the value of position-to in addition to origin and window.

<!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 App</h1>
    </div>

    <div data-role='content' style='text-align: center'>
        <a href='#positionWindow' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup' data-position-to='window'>Position to window</a>
        <a href='#positionOrigin' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup' data-position-to='origin'>Position to origin</a>
        <a href='#positionSelector' class='ui-btn ui-corner-all ui-shadow ui-btn-inline' data-rel='popup' data-position-to='#position-header'>Position to #position-header</a>
        <div data-role='popup' id='positionWindow' class='ui-content' data-theme='a'>
            <p>I am positioned to the window.</p>
        </div>
        <div data-role='popup' id='positionOrigin' class='ui-content' data-theme='a'>
            <p>I am positioned over the origin.</p>
        </div>
        <div data-role='popup' id='positionSelector' class='ui-content' data-theme='a'>
            <p>I am positioned over the header for this section via a selector. If the header isn't scrolled into view, collision detection will place the popup so it's in view.</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: Closing popups
jQuery Mobile: Popup transitions >>