Listviews are the most frequently used widget provided by jQueryMobile.
How to generate a listview of items and on clicking an item show the details of that item in popup.
There is no need to keep details of all the items in the page.
Details can be retrieved on demand from database table.

There is a post in this blog on runtime popup.
jQuery Mobile runtime popup

Its about a function which can add a popup runtime.

Here is a Demo on that.
There is list of contacts and onclick showing the details of the contact in a popup.

Made a contacts table in database and using inserted 100 fake contact details to it.

Only name and unique id is used for building listview.
And added an event listener to ‘pagebeforechange’ event.
Which is fired on clicking any item in the list.

unique id of the contact, which is the querystring value, is read in ‘pagebeforechange’ event handler and an ajax call is made to get details of the contact.

Once ajax response is returned create a popup runtime and show the details.

Also cancel the default behaviour of list anchor tag.


$(document).on("pagebeforechange", function (e, data) {
    // We only want to handle changePage() calls where the caller is
    // asking us to load a page by URL
    if(typeof data.toPage === "string") {
        // We are being asked to load a page by URL
        var u = $.mobile.path.parseUrl(data.toPage),
            _re = "#contact";
        if( !== -1) {
            var id = urlParam("id", data.toPage);
                type: "POST",
                url: "get.php?id=" + id
            }).done(function (data) {
                data = $.parseJSON(data);
                var msg = '<div data-role="collapsible" data-collapsed="false"  data-theme="b" data-content-theme="d"> <h4>' +[0].name + '</h4><p>';
                msg += '<div>' +[0].address + '</div>';
                msg += '<div>' +[0].city + '</div>';
                msg += '<div>' +[0].email + '</div>';
                msg += '<div></div>';
                msg += '<div><b>' +[0].company + '</b></div></p> </div>';
// Determine url param
var urlParam = function (name, url) {
    var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(url);
    return results !== null ? results[1] || "" : "";

    function runtimePopup(message, popupafterclose) {
        var template = "<div data-role='popup' class='ui-content messagePopup' style='max-width:280px'>" + "<a href='#' data-role='button' data-theme='g' data-icon='delete' data-iconpos='notext' " + " class='ui-btn-left closePopup'>Close</a> <span> " + message + " </span> </div>";
        popupafterclose = popupafterclose ? popupafterclose : function () {};
        $.mobile.activePage.find(".closePopup").bind("tap", function (e) {
            popupafterclose: function () {