[Javascript] jquery: Using the same alert popup across multiple pages
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
// Instantiate the popup on DOMReady, and enhance its contents
$( function() {
$( "#popup-alert" ).enhanceWithin().popup();
});
function ShowAlert(title, message)
{
$("#alert_title").html(title);
$("#alert_message").html(message);
$("#popup-alert").popup("open", {positionTo:"window"});
}
</script>
</head>
<body style="margin: 0; padding: 0">
<div id="popup-alert" data-theme="a">
<!-- This popup has its theme explicitly defined via data-theme="a"
because it has no parent from which to automatically inherit
its theme -->
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<div style="text-align: center;">
<h3 id="alert_title">[Title]</h3>
</div>
<div id="alert_message" style="padding: 20px;">
[Message]
</div>
<div style="text-align: center; padding: 20px;">
<a href="#" data-rel="back" data-mini="true" data-role="button" data-inline="true">Ok</a>
</div>
</div>
<div id="page1" data-role="page">
<div data-role="header">
<h1>Page1</h1>
</div>
<div role="main" class="ui-content">
<a href="#popup-alert" data-role="button" data-rel="popup">Open Popup</a>
<button id="alert_button" data-role="button" data-icon="check" data-theme="a">Open Popup by javascript</button>
</div>
</div>
<script>
$("#alert_button").click(function(event) {
ShowAlert("Alert", "This is alert window.");
});
</script>
</body>
</html>