jQM - Popup example

by Jose Montero

HTML

<link rel="stylesheet" href="http://jeromeetienne.github.com/jquery-mobile-960/css/jquery-mobile-fluid960.css">
<link rel="stylesheet" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css">
<script src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
  <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">
            <a href="#" data-role="button" id="test-button">Test popup</a>
            <div data-role="popup" id="confirmDialog" data-overlay-theme="b" data-theme="a" style="max-width:400px;" class="ui-corner-all">
                <div data-role="header" data-theme="a" class="ui-corner-top">
                  <h1>Delete Page?</h1>
                </div>
                <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
                  <h3 class="ui-title">Are you sure you want to delete this page?</h3>
                  <p>This action cannot be undone.</p>
                  <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Cancel</a>    
                  <a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">Delete</a>  
                </div>
                <h3>asdasdasas</h3><br><br><br>
                <h3>asdasdasas</h3><br><br><br>
                <h3>asdasdasas</h3><br><br><br>
                <h3>asdasdasas</h3><br><br><br>
               ...

JavaScript

$('#index').live('pagebeforeshow',function(e,data){    
    $('#test-button').live('click', function(e) {
        $('#confirmDialog').css('overflow-y', 'scroll');        
        $('#confirmDialog').popup('open');
    });    
});

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