JSFiddle - React, Tailwind, and code Playground
by Ohpyx
HTML
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<a title="delete" href="#confirmDelete" data-role="button" data-rel="popup" id="deletemenuitem">Delete</a>
<a title="delete" href="#errorPopup" data-role="button" data-rel="popup" id="popUpError">Error</a>
<div data-role="popup" id="confirmDelete" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>confirm delete</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h4 id="confirmDeleteMessage" class="ui-title"></h4>
<div class="ui-grid-a">
<div class="ui-block-a">
<a id="deleteConfirmed" href="#" data-role="button" data-theme="b">OK</a>
</div>
<div class="ui-block-b">
<a href="#" data-role="button" data-rel="back" data-theme="c">Cancel</a>
</div>
</div>
</div>
</div>
<div data-role="popup" id="errorPopup" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Delete</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h4 id="errorMessage" class="ui-title">Error deleting item</h4>
<a href="#" data-role="button" data-rel="back" data-theme="b">OK</a>
</div>
</div>
</div>
</body>
</html>
JavaScript
$('#deleteConfirmed').on('click', function() {
$('#confirmDelete').popup('close');
setTimeout(function() {
$('#errorPopup').popup('open');
}, 100);
});