jQM - Popup example

HTML

<script src="https://rawgithub.com/teamdf/jquery-visible/master/jquery.visible.min.js"></script>
<div data-role="page" id="index">
  <div data-role="header">
    <h3>Some page</h3>
  </div>
  <div data-role="content">
    <a href="#" data-role="button" id="test-button">Test popup</a>
    <div data-role="popup" id="confirmDialog">
      <div data-role="header">
        <h1>Delete Page?</h1>
      </div>
      <div data-role="content">
        <h3>Are you sure?</h3>
        <a href="#" data-role="button" data-inline="true" data-rel="back">Cancel</a>
        <a href="#" data-role="button" data-inline="true" data-rel="back">Cancel</a>
        <a href="#" data-role="button" data-inline="true" data-rel="back">Cancel</a>
        <a href="#" data-role="button" data-inline="true" data-rel="back">Cancel</a>
        <a href="#" data-role="button" data-inline="true" data-rel="back">Cancel</a>
        <a href="#" data-role="button" data-inline="true" data-rel="back">Cancel</a>
        <a href="#" data-role="button" data-inline="true" data-rel="back">Cancel</a>
        <a href="#" data-role="button" data-inline="true" data-rel="back">Cancel</a>
        <a href="#" data-role="button" data-inline="true" data-rel="back">Cancel</a>
        <a href="#" data-role="button" data-inline="true" data-rel="back">Cancel</a>
        <a href="#" data-role="button" data-inline="true" data-rel="back">Cancel</a>
        <a href="#" data-role="button" data-inline="true" data-rel="back">Cancel</a>
        <a href="#" data-role="button" data-inline="true" data-rel="back">Cancel</a>
        <a href="#" data-role="button" data-inline="true" data-rel="back">Cancel</a>
        <a href="#" data-role="button" data-inline="true" data-rel="back">Cancel</a>
        <a href="#" data-role="button" data-inline="true" data-rel="back">Cancel</a>
        <a href="#" data-role="button" data-inline="true" data-rel="back">Cancel</a>
        <a href="#" data-role="button" data-inline="true"...

JavaScript

// http://stackoverflow.com/questions/14723788/jquery-mobile-popup-content-height-exceeds-window-height

$('#test-button').on('click', function(e) {     
  $('#confirmDialog').popup('open');

  // http://stackoverflow.com/questions/20791374/jquery-check-if-element-is-visible-in-viewport  
    
  // https://github.com/teamdf/jquery-visible  
    
  if(!$('#confirmDialog').visible(true)) {
    alert('Popup not fully visible - add overflow scrolling');
    $('#confirmDialog').css('overflow-y', 'scroll'); 
  }  
});

$('#confirmDialog').on({
  popupbeforeposition: function() {
    var maxHeight = $(window).height() - 30;
    $('#confirmDialog').css('max-height', maxHeight + 'px');
  }
});