diff --git a/demos/jqm-contents.php b/demos/jqm-contents.php
index fbee7b7b933..8176ac45dda 100644
--- a/demos/jqm-contents.php
+++ b/demos/jqm-contents.php
@@ -70,6 +70,7 @@
<li data-filtertext="single page"><a href="../pages-single-page/" data-ajax="false">Single page</a></li>
<li data-filtertext="multipage multi-page page"><a href="../pages-multi-page/" data-ajax="false">Multi-page template</a></li>
<li data-filtertext="dialog page widget modal popup"><a href="../pages-dialog/" data-ajax="false">Dialog page</a></li>
+ <li data-filtertext="dialog page widget modal popup navigation"><a href="../pages-dialog-nav/" data-ajax="false">Dialog page (with navigation support)</a></li>
</ul>
</div>
</li>
diff --git a/demos/pages-dialog-nav/dialog.html b/demos/pages-dialog-nav/dialog.html
new file mode 100644
index 00000000000..52cf770ae16
--- /dev/null
+++ b/demos/pages-dialog-nav/dialog.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Dialog example - jQuery Mobile Demos</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css">
+ <link rel="stylesheet" href="../_assets/css/jqm-demos.css">
+ <link rel="shortcut icon" href="../favicon.ico">
+ <script src="../../external/jquery/jquery.js"></script>
+ <script src="../_assets/js/"></script>
+ <script src="../../js/"></script>
+</head>
+<body>
+
+<div data-role="dialog" data-dialog="true">
+
+ <div data-role="toolbar" data-type="header" data-theme="b">
+ <h1>Dialog</h1>
+ </div>
+
+ <div role="main" class="ui-content">
+ <h1>Delete page?</h1>
+ <p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
+ <a href="index.php" data-rel="back" class="ui-button ui-shadow ui-corner-all ui-button-a">Sounds good</a>
+ <a href="index.php" data-rel="back" class="ui-button ui-shadow ui-corner-all ui-button-a">Cancel</a>
+ <a href="other-page.php" class="ui-button ui-shadow ui-corner-all ui-button-a">Other Page</a>
+ </div>
+ </div>
+
+</body>
+</html>
diff --git a/demos/pages-dialog-nav/index.php b/demos/pages-dialog-nav/index.php
new file mode 100644
index 00000000000..39d82d6c94b
--- /dev/null
+++ b/demos/pages-dialog-nav/index.php
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Dialogs - jQuery Mobile Demos</title>
+ <link rel="shortcut icon" href="../favicon.ico">
+ <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css">
+ <link rel="stylesheet" href="../_assets/css/jqm-demos.css">
+ <script src="../../external/jquery/jquery.js"></script>
+ <script src="../_assets/js/"></script>
+ <script src="../../js/"></script>
+ <script id="dialog-script">
+ ( function( $ ) {
+ $( document ).on( "pagecontainerbeforechange", function( event, data ) {
+ if ( data.options.fromHashChange === true && data.toPage &&
+ typeof data.toPage !== "string" &&
+ data.toPage.hasClass( "ui-page-dialog" ) ) {
+ console.log( "Skipping past dialog" );
+ window.history[ data.options.direction ]();
+ return false;
+ }
+ } );
+ } )( jQuery );
+ </script>
+ <style>
+ .ui-page-dialog.dialog-actionsheet .ui-page-dialog-contain {
+ margin-top: 0;
+ }
+ </style>
+</head>
+<body>
+<div data-role="page" class="jqm-demos" data-quicklinks="true">
+
+ <div data-role="toolbar" data-type="header" class="jqm-header">
+ <h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquerymobile-logo.png" alt="jQuery Mobile"></a></h2>
+ <a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-toolbar-header-button-left">Menu<span class="ui-icon ui-icon-bars"></span></a>
+ <a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-toolbar-header-button-right">Search<span class="ui-icon ui-icon-search"></span></a>
+ <div class="jqm-banner"><h3>Version <span class="jqm-version"></span> Demos</h3></div>
+ </div><!-- /header -->
+
+ <div role="main" class="ui-content jqm-content">
+
+ <h1>Dialogs with navigation support</h1>
+
+ <p>The behavior whereby a dialog appears but is not reachable via the browser's "Back" or "Forward" buttons, available until now only by means of the dialog widget, can be achieved with the following extension:</p>
+ <div data-demo-js="#dialog-script" data-demo-html="true">
+ <a href="dialog.html" class="ui-button ui-corner-all ui-button-inline ui-shadow">Open dialog</a>
+ </div>
+
+ </div><!-- /content -->
+
+ <?php include( '../jqm-navmenu.php' ); ?>
+
+ <div data-role="toolbar" data-type="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
+ <h6>jQuery Mobile Version <span class="jqm-version"></span> Demos</h6>
+ <ul>
+ <li><a href="http://jquerymobile.com/" title="Visit the jQuery Mobile web site">jquerymobile.com</a></li>
+ <li><a href="https://github.com/jquery/jquery-mobile" title="Visit the jQuery Mobile GitHub repository">GitHub repository</a></li>
+ </ul>
+ <p>Copyright jQuery Foundation</p>
+ </div><!-- /footer -->
+
+</div><!-- /page -->
+
+<?php include( '../jqm-search.php' ); ?>
+
+</body>
+</html>
diff --git a/demos/pages-dialog-nav/other-page.php b/demos/pages-dialog-nav/other-page.php
new file mode 100644
index 00000000000..a88fae4a8c4
--- /dev/null
+++ b/demos/pages-dialog-nav/other-page.php
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Dialogs - jQuery Mobile Demos</title>
+ <link rel="shortcut icon" href="../favicon.ico">
+ <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css">
+ <link rel="stylesheet" href="../_assets/css/jqm-demos.css">
+ <script src="../../external/jquery/jquery.js"></script>
+ <script src="../_assets/js/"></script>
+ <script src="../../js/"></script>
+ <style>
+ .ui-page-dialog.dialog-actionsheet .ui-page-dialog-contain {
+ margin-top: 0;
+ }
+ </style>
+</head>
+<body>
+<div data-role="page" class="jqm-demos" data-quicklinks="true">
+
+ <div data-role="toolbar" data-type="header" class="jqm-header">
+ <h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquerymobile-logo.png" alt="jQuery Mobile"></a></h2>
+ <a href="#" class="jqm-navmenu-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-toolbar-header-button-left">Menu<span class="ui-icon ui-icon-bars"></span></a>
+ <a href="#" class="jqm-search-link ui-button ui-button-icon-only ui-corner-all ui-nodisc-icon ui-alt-icon ui-toolbar-header-button-right">Search<span class="ui-icon ui-icon-search"></span></a>
+ <div class="jqm-banner"><h3>Version <span class="jqm-version"></span> Demos</h3></div>
+ </div><!-- /header -->
+
+ <div role="main" class="ui-content jqm-content">
+
+ <h1>Landing page</h1>
+
+ <p>You have reached this page from a dialog. If you click your browser's "Back" button, you will not go back to the dialog, but to the page from which it opened. Similarly, if you then click "Forward", you will skip past the dialog and reach this page again.</p>
+
+ </div><!-- /content -->
+
+ <?php include( '../jqm-navmenu.php' ); ?>
+
+ <div data-role="toolbar" data-type="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
+ <h6>jQuery Mobile Version <span class="jqm-version"></span> Demos</h6>
+ <ul>
+ <li><a href="http://jquerymobile.com/" title="Visit the jQuery Mobile web site">jquerymobile.com</a></li>
+ <li><a href="https://github.com/jquery/jquery-mobile" title="Visit the jQuery Mobile GitHub repository">GitHub repository</a></li>
+ </ul>
+ <p>Copyright jQuery Foundation</p>
+ </div><!-- /footer -->
+
+</div><!-- /page -->
+
+<?php include( '../jqm-search.php' ); ?>
+
+</body>
+</html>