Popup positionTo mobile

by manoj

HTML

<!DOCTYPE html>
<html>
<head>
  
<title>jQuery Mobile test page</title>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale=1">
  
<link rel="stylesheet"  href="http://code.jquery.com/mobile/latest/jquery.mobile.css" /> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script> 
<script>
$( document ).on( 'pageinit', function() {
  $( "#period, #period2" ).on( "click", function( event, ui ) {
    $( '#popupSetDate' ).popup( 'open', {
       theme: "a",
       positionTo: event.target,
       transition: "none" });
  });
});
</script>
</head>
<body>
    
 <div data-role="page">

  <div data-role="header">
    <h1>No issue template</h1>
    <span id="period" class="ui-btn-right">Period (right)</span>
    <span id="period2" class="ui-btn-left">Period (left)</span>
  </div><!-- /header -->

  <div data-role="content">  
      <p>no content here ...</p>
  </div><!-- /content -->

  <div data-role="popup" id="popupSetDate" data-theme="a">
      <p>Your popup content will go here.</p>
  </div>

</div><!-- /page -->

</body>
</html>