CODEWITHSUNDEEP
phpjavascriptjquerylogic
swapnesh
swapnesh

Reputation: 26732

How to display content in a modal box with images in that box

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.

Upvotes: 0

Views: 269

Answers (2)

fecapeluda
fecapeluda

Reputation: 133

Well you could mix some ajax there there like Stardev says but if you need a simple solution try this Url preview script (Check it please) very clean or lightbox who support iframes. A big list can found here and please check this link to have an idea :)

For example if you try ajax i'll be something like this: Jquery: 

$("a").click(function() {
....
    $.ajax({
           type: "POST",
           url: "page.php",
           data: "id="+id,
           success: function(){
                  $('#mymodal').html('This is my image'); //Your div
           }
         }); ....

Prettyphoto HTML

<href="..." rel="prettyPhoto[ajax]">My image</a>

If you use an iframe solution:

<href="..." rel="prettyPhoto[iframe]">My image</a>

I hope it helps!

Upvotes: 1

Config
Config

Reputation: 1692

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.

Upvotes: 0

Related Questions