jQM 1.4 Dynamic Popup

by Erik Zanker

HTML

<div data-role="page" id="page1">
    <div data-role="header">
         <h1>Popups</h1> 
    </div>
    <div role="main" class="ui-content">
        <!-- dynamic -->
        <button id="btnDynamic">Dynamic Popup...</button> 
        <!-- static -->
        <a id="btnStatic" href="#popupDialog" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-corner-all ui-shadow ">Static Popup...</a>

    </div>
    
    <!-- static popup markup -->
    <div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="a" data-dismissible="false" style="max-width:400px;">
        <div data-role="header" data-theme="a">
             <h1>Delete Page?</h1>
 <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>

        </div>    
        <div role="main" class="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="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-rel="back">Cancel</a><a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-rel="back" data-transition="flow">Delete</a>
        </div>
    </div>
</div>

JavaScript

$(document).on("pagecreate", "#page1", function () {

    $("#btnDynamic").on("click", function () {
        //create the popup markup
        var html = CreatePopup("Dynamic", "This popup is created and launched entirely via script");
        //append popup to DOM, tell jqm to enhance and initialize the popup
        // and to remove the popup from DOM on close
        $("#page1").append(html).find("#mypDialog").enhanceWithin().popup({
            afterclose: function (event, ui) {
                //remove from DOM on close
                $("#mypDialog").remove();
            }
        }).popup("open", {
            transition: "flow",
            positionTo: "window"
        });
        //Add click handler for button in popup
        $("#mypDialog").on("click", "#btnPopOK", function(){
            alert("You clicked OK, I will now close the popup");            
            $("#mypDialog").popup("close");
        });
    });
});

function CreatePopup(title, content){
    var html = '<div data-role="popup" id="mypDialog" data-overlay-theme="b" data-theme="a" data-dismissible="false" >';
    html += '<div data-role="header"><h1>' + title + '</h1><a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a></div>';
    html += '<div role="main" class="ui-content"> <h3 class="ui-title">' + content + '</h3><a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-rel="back">Cancel</a><a id="btnPopOK" href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-transition="flow">OK</a></div>';
    html += '</div>';
    return html;
}