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.

Series Navigation<< jQuery Mobile: Popup nested menu
jQuery Mobile: Adding padding to popup >>