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
Series Navigation<< jQuery Mobile: Adding padding to popup
jQuery Mobile: Popup positioning >>