jquery popup with different content

[brown2005]

Hi, I was wondering if any one knows of a tutorial or script where I can use a query popup box but have it show different content based on different links clicked.

 

thanks.

[trq]

This isn't that hard to do. Here is some code i use to do the same sort of thing...

 

$(document).ready(function() {
    $('.overlay').click(function() {
        // If a dialog is already open, close it.
        if ($('.dialog').length > 0) {
            $('.dialog').dialog('close');
        }
        // Get the name of the file used to fill
        // the dialog with content.
        var file = $(this).attr('name');
        // Create the empty div to store the dialog content in.
        var $dialog = $('<div class="dialog"></div>')
        // Load the content into the div.
        .load(file)
        // Initialize the dialog.
.dialog({
            autoOpen: false,
            resizable: false,
            height: 472,
            zIndex: 40000,
            //modal: true,
            width: 792,
        });
        // Open the new dialog.
        $dialog.dialog('open');
    });
});

 

As you can see, this code takes a filename loaded from the name attribute of the link you've clicked on and loads it into the dialog's content.

 

So, to work this you would have links like....

 

<a href="#" name="foo.html" class="overlay">foo</a>
<a href="#" name="bar.html" class="overlay">bar</a>

 

Clicking 'foo' would open a dialog with the contents of foo.html in it.

[raknjak]

This might help you out?

http://fancybox.net/

[brown2005]

This isn't that hard to do. Here is some code i use to do the same sort of thing...

 

$(document).ready(function() {
    $('.overlay').click(function() {
        // If a dialog is already open, close it.
        if ($('.dialog').length > 0) {
            $('.dialog').dialog('close');
        }
        // Get the name of the file used to fill
        // the dialog with content.
        var file = $(this).attr('name');
        // Create the empty div to store the dialog content in.
        var $dialog = $('<div class="dialog"></div>')
        // Load the content into the div.
        .load(file)
        // Initialize the dialog.
.dialog({
            autoOpen: false,
            resizable: false,
            height: 472,
            zIndex: 40000,
            //modal: true,
            width: 792,
        });
        // Open the new dialog.
        $dialog.dialog('open');
    });
});

 

As you can see, this code takes a filename loaded from the name attribute of the link you've clicked on and loads it into the dialog's content.

 

So, to work this you would have links like....

 

<a href="#" name="foo.html" class="overlay">foo</a>
<a href="#" name="bar.html" class="overlay">bar</a>

 

Clicking 'foo' would open a dialog with the contents of foo.html in it.

 

Hi, that is exactly what I want to do.

 

I have never used jquery before, do you have a link to get the full script to make this work? Or could you explain.

 

Thanks

[.josh]

http://www.jquery.com  click the big download button, upload it to your server, throw a script tag on your page pointing to it. Looks like you also need to download and put a script include for the UI/dialog plugin as well (you can also find it on their site).