JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.min.css">
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<!-- /header -->
<div data-role="popup" id="popupInfo" data-dismissible="false" style="max-width:400px;">
<div data-role="header" class="ui-corner-top">
<h1>Contact Info</h1>
</div>
<div data-role="content" data-theme="a">
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="" placeholder="Display name" data-theme="a">
<label for="tel">Number:</label>
<input type="tel" name="tel" id="tel" value="" placeholder="tel" data-theme="a">
<button type="submit" data-theme="b" class=" ui-btn ui-btn-b ui-shadow ui-corner-all">OK</button> <a href="" data-role="button" data-rel="back">Cancel</a>
<a href="" id="del" data-role="button" data-rel="back" data-icon="minus">Delete</a>
</div>
</div>
<div data-role="popup" id="popupDelete" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:600px;">
<div data-role="header" data-theme="aa" class="ui-corner-top">
<h1>Delete Contact?</h1>
</div>
<div data-role="content" data-theme="dd">
<h3 class="ui-title">Are you sure you want to delete <span>#</span> from your contacts?</h3>
<p>This action cannot be undone.</p>
<button type="submit" data-theme="b" class=" ui-btn ui-btn-b ui-shadow ui-corner-all">OK</button> <a href="#" data-role="button" data-rel="back">Cancel</a>
</div>
</div>
</div>
JavaScript
$(document).on("pageinit", function () {
$('#del').click(function (e) { // e is the event
setTimeout(function () {
$("#popupDelete").popup("open")
}, 100);
});
});