How to check if jQM popup fits user's viewport?

Question

So I've managed to add scrollbars to large jQM popups with css('overflow-y', 'scroll'). But how to do this only when the popup is larger than the user's viewport?

I'm trying with the jquery-visible plugin but I can't get it to respond:

http://jsfiddle.net/mmRnq/124/

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

  // https://stackoverflow.com/questions/20791374/jquery-check-if-element-is-visible-in-viewport  

  if(!$('#confirmDialog').visible(true)) {
    alert('Popup not fully visible - add overflow scrolling');
    $('#confirmDialog').css('overflow-y', 'scroll'); 
  }  
});

Answer 1

You can use

overflow-y: auto

This makes the scrollbar only visible when it is needed.

Updated FIDDLE

UPDATE:

You can also just make the content of the popup scrollable so the titlebar remains in view:

#confirmDialog .ui-content {
    overflow-y: auto;
}

$('#confirmDialog').on({
  popupbeforeposition: function() {
      var maxHeight = $(window).height() - 120;
      $('#confirmDialog .ui-content').height(maxHeight);
  }
});

DEMO