Question

Currently i have a detailed page listing containing all links like page.php contains page.php?id=1, page.php?id=2, page.php?id=3, page.php?id=4..etc . Now i want to just provide a preview button on which the on clicking that button without navigating to these pages, i can show the content in a popup/modal box without moving to these pages? I am stuck with this id concept that how can i achieve this. Any source/link is really appreciable.

Answer 1

You could perform an AJAX call with jQuery based on the button that is clicked, to load the page inside your dialog:

$('.previewButton').click(function(){        
    // determine which page ID to load 
    // based on the button that was clicked
    var pageID = ...;

    // fetch the page
    $.get('page.php', {page: pageID}, function(data) {
        // show the page content inside the dialog
        $('.myDialog').html(data);
    });
});

For the dialog you could for example use jQuery UI’s dialog: http://jqueryui.com/demos/dialog/

With that plugin you can simply call $(".myDialog").dialog() to make your <div class="myDialog"></div> show as a pretty dialog.