[html]
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Popup</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1" />
<!-- jQuery CDN hosted files -->
<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>
</head>
<body>
<div id="home" data-role="page" align="center">
<h1>Click on below buttons to see the different popup effects</h1>
<div data-role="controlgroup" data-type="horizontal">
<a href="#popup1" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Popup</a>
<div data-role="popup" id="popup1">
<p>Welcome to SPLessons jQuery Mobile</p>
</div>
<a href="#popup2" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Popup with extra padding</a>
<div data-role="popup" id="popup2" class="ui-content">
<p>Welcome to SPLessons jQuery Mobile</p>
</div>
<a href="#popup3" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="window">Popup at center</a>
<div data-role="popup" id="popup3" class="ui-content">
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
<p>Welcome to SPLessons jQuery Mobile</p>
</div>
<a href="#popup4" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="window" data-transition="slide">Popup with transition</a>
<div data-role="popup" id="popup4" class="ui-content">
<p>Welcome to SPLessons jQuery Mobile</p>
</div>
<a href="#popup5" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="window" data-transition="slide">Popup with arrow</a>
<div data-role="popup" id="popup5" class="ui-content" data-arrow="l">
<p>Welcome to SPLessons jQuery Mobile</p>
</div>
</div>
<div id="footer" style="margin-top:300px">
<h2>Click on below link and image to see the popup effects with image</h2>
<a href="#popup6" data-rel="popup" data-position-to="window">
<img src=" " alt="SPLessons" style="width:200px;"></a>
<div data-role="popup" id="popup6">
<img src="http://www.splessons.com/wp-content/uploads/2016/06/jquerytutorial-logo-splessons.jpg" style="width:800px;height:400px;" alt="SPLessons">
</div>
<a href="#popup7" data-rel="popup" data-position-to="window">
<img src="http://www.splessons.com/wp-content/uploads/2016/06/jquerytutorial-logo-splessons.jpg" alt="SPLessons View" style="width:200px;"></a>
<div data-role="popup" id="popup7" data-overlay-theme="b">
<img src="http://www.splessons.com/wp-content/uploads/2016/06/jquerytutorial-logo-splessons.jpg" style="width:800px;height:400px;" alt="SPLessons">
</div>
</div>
</div>
</body>
</html>
[/html]
Output: Initial output will be as follows.
When clicked on the first button "Popup", the output will be as follows.
When clicked on the second button "Popup with extra padding", the output will be as follows.
When clicked on the third button "Popup at center", the output will be as follows.
When clicked on the fourth button "Popup with transition", the output will be as follows.
When clicked on the fifth button "Popup with arrow", the output will be as follows.
When clicked on the image-1 with SPLessons as placeholder, the output will be as follows.
When clicked on the image-2 with SPLessons as the image, the output will be as follows.