jQuery Mobile - Popup

index.html

<!-- http://demos.jquerymobile.com/1.4.5/panel/ -->
<!-- http://demos.jquerymobile.com/1.4.5/toolbar-external/ -->
<!-- Start of first page -->

<div data-role="page" id="first-page">
	
<div data-role="popup" id="popup">
	<a data-role="button" data-rel="back" href=""></a>
I'm popping.
</div>
	<div role="main" class="ui-content">
		<p>I'm first in the source order so I'm shown as the page.</p>
		<p>View internal page called <a data-role="button" href="#second-page">Second</a></p>
		<p>View internal page called <a data-role="button" data-inline="true" href="#second-page">Second</a></p>
		<p>View internal page called <a data-role="button" data-inline="true" data-icon="arrow-r" href="#popup" data-rel="popup">Pop</a></p>
	</div>
	<!-- /content -->

	
</div>
<!-- /page -->

<!-- Start of second page -->
<div data-role="page" id="second-page">

	<div role="main" class="ui-content">
		<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
		<p><a href="#first-page">Back to First</a></p>
		<p><a href="#third-page">Forward to Third</a></p>
	</div>
	<!-- /content -->

</div>
<!-- /page -->


<!-- Start of third page -->
<div data-role="page" id="third-page">
	<div role="main" class="ui-content">
		<p>I'm the third in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
		<p><a href="#first-page">Back to First</a></p>
		<p><a href="#second-page">Back to Second</a></p>
	</div>
	<!-- /content -->
</div>
<!-- /page -->

<div data-role="panel" id="mypanel" data-display="push" data-theme="a">
		<!-- panel content goes here -->
		<h3>I'm a panel</h3>
		<ul data-role="listview">
			<li><a href="#first-page">Page 1</a></li>
			<li><a href="#second-page">Page 2</a></li>
			<li><a href="#third-page">Page 3</a></li>
		</ul>
	</div>
	<!-- /panel -->

	<div id="myheader" data-role="header" data-position="fixed" data-theme="a">
		<a data-icon="bars" class="ui-btn-left" href="#mypanel">Menu</a>
		<a data-icon="audio" class="ui-btn-right" href="#">Audio</a>
		<h1>First page (this header is fixed)</h1>
	</div>
	<!-- /header -->

<div data-role="footer" data-theme="a">
		<h4>Page Footer</h4>
	</div>
	<!-- /footer -->

jQuery Mobile - Popup.markdown

jQuery Mobile - Popup

A Pen by Jorge C. S. Cardoso on CodePen.

License.

script.js

console.clear();

$(function() {
	$("[data-role='header'], [data-role='footer']").toolbar();

	$("#mypanel").panel().enhanceWithin();

	/*$("#mypanel a").on("click", function(ev) {
		$("#myheader h1").text($(this).text());
	});
	*/
	
	$(":mobile-pagecontainer").on("pagecontainershow", function(event, ui) {

		switch (ui.toPage.attr("id")) {
			case "first-page":
				$("#myheader h1").text("First page");
				break;
			case "second-page":
				$("#myheader h1").text("Second page");
				break;
			case "third-page":
				$("#myheader h1").text("Third page");
				break;
		}

	});
});

scripts

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>

style.css

#popup {
	
	width:200px;
	height:100px;
}

styles

<link href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" rel="stylesheet" />