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

jQuery Mobile: Closing popups

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

By default popups can be closed either by clicking outside the popup widget or by pressing the Esc key.  To prevent this, the data-dismissible=”false” attribute can be added to the popup.

To add an explicit close button to a popup, add a link with the role of button into the popup container with a data-rel=”back” attribute and position via a class.

<!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='#popupCloseRight' data-rel='popup' class='ui-btn ui-corner-all ui-shadow ui-btn-inline'>Right close
            button</a>
        <a href='#popupCloseLeft' data-rel='popup' class='ui-btn ui-corner-all ui-shadow ui-btn-inline'>Left close
            button</a>
        <a href='#popupUndismissible' data-rel='popup' class='ui-btn ui-corner-all ui-shadow ui-btn-inline'>Undismissible
            Popup</a>

        <div data-role='popup' id='popupCloseRight' class='ui-content' style='max-width:280px'>
            <a href='#' data-rel='back'
               class='ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right'>Close</a>

            <p>I have a close button at the top right corner with simple HTML markup.</p>
        </div>
        <div data-role='popup' id='popupCloseLeft' class='ui-content' style='max-width:280px'>
            <a href='#' data-rel='back'
               class='ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-left'>Close</a>

            <p>I have a close button at the top left corner with simple HTML markup.</p>
        </div>
        <div data-role='popup' id='popupUndismissible' class='ui-content' style='max-width:280px'
             data-dismissible='false'>
            <a href='#' data-rel='back'
               class='ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-left'>Close</a>

            <p>I have the <code>data-dismissible</code> attribute set to <code>false</code>. I'm not closeable by
                clicking outside of me.</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

jQuery Mobile: Adding padding to popup

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

In the previous example, we have used the class=’ui-content’ to add 15px to the padding of the popup.

This is also illustrated in this example.

<!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'>
        <a href='#popupPadded' data-rel='popup' class='ui-btn ui-corner-all ui-shadow ui-btn-inline'>Popup with padding</a>
        <div data-role='popup' id='popupPadded' class='ui-content'>
            <p>This is a popup with the <code>ui-content</code> class added to the popup container.</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

jQuery Mobile: Popup dialog

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

Standard dialog box can be placed into a popup.

We can add the data-dismissible=”false” attribute to the popup to let the popup take control of the screen.

You can only close the dialog box if you click inside the dialog box.

<!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'>
        <a href='#popupDialog' data-rel='popup' data-position-to='window' data-transition='pop' class='ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-delete ui-btn-icon-left ui-btn-a'>Delete page...</a>
        <div data-role='popup' id='popupDialog' data-overlay-theme='b' data-theme='b' data-dismissible='false' style='max-width:400px;'>
            <div data-role='header' data-theme='b'>
                <h1>Delete Page?</h1>
            </div>
            <div role='main' class='ui-content'>
                <h3 class='ui-title'>Are you sure you want to delete this page?</h3>
                <p>This action cannot be undone.</p>
                <a href='#' class='ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b' data-rel='back'>Cancel</a>
                <a href='#' class='ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b' data-rel='back' data-transition='flow'>Delete</a>
            </div>
        </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

In this example, I have used an anchor to create the delete page button.  I have used class=’ui-btn-a’ to make the button into a theme a button.

As for the popup dialog, it was built using theme b.

In line 21, ui-content class was added to the popup to add the standard 15px of padding.

jQuery Mobile: A popup menu

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

A menu can be created by adding a listview inside a popup.

The 3 main lines are highlighted below.

In line 16, the href has a data relationship with the <div> with the popup datarole.

Popup Menu
<!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>Codecrawl</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header' data-theme='b'>
        <h1>A Popup Menu App</h1>
    </div>

    <div data-role='content'>
        <a href='#popupMenu' data-rel='popup' data-transition='slideup' class='ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a'>Actions...</a>
        <div data-role='popup' id='popupMenu' data-theme='b'>
            <ul data-role='listview' data-inset='true' style='min-width:210px;'>
                <li data-role='list-divider'>Choose an action</li>
                <li><a href='#'>View details</a></li>
                <li><a href='#'>Edit</a></li>
                <li><a href='#'>Disable</a></li>
                <li><a href='#'>Delete</a></li>
            </ul>
        </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