jQM - Popup example

by Erik Zanker

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>
    
  <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"...

CSS

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

JavaScript

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

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