jQuery Mobile Reusing a Header and Navigation
You can use External Header and Popup and have them accessible from any page.
Place both div separately inside body not inside any other page. Make sure you don't wrap Popup div in any other div/container but body.
<body>
<div data-role="header" data-theme="a">
</div>
<div data-role="popup">
</div>
<div data-role="page">
</div>
</body>
Since both are External widgets, you need to initialize them manually. Call .toolbar() to initialize Header, and .popup() to initialize Popup. If Popup contains other jQM widgets e.g. listview, you need to call .enhanceWithin() to initialize widgets inside Popup. just add the below code in head.
$(function () {
$("[data-role=header]").toolbar(); /* initialize header */
$("[data-role=popup]").popup().enhanceWithin(); /* initialize popup */
});
Demo