How can I re-size and re-position a shadowbox/greybox window to display in a certain div element?

Question

I would like to know if it is possible to re-size and re-position a greybox or shadowbox window to display in a certain div element?

I am creating a template for a wordpress site, and I am using the default calendar, but when you click on a date inside of the calendar, the default action is to open it up in a new window.

Would it be possible to mod greybox or shadowbox in such a way that when you click on a date, the box opens up over the calendar displaying the contents in it, instead of a new page?

Or is there another way of achieving the desired result, maybe with jQuery or Javascript?

Any help would be greatly appreciated, thanx in advance!

Answer 1

jQuery UI has a widget called Dialog that can achieve your result. You could use it like this:

$(document).ready( function() {

    // This will initialize the dialog box and hide it by default.
    // You can find a list of most options here: http://docs.jquery.com/UI/Dialog
    $("#dialog").dialog({
        autoOpen: false,
        modal : true,
    });

    // This will select the links like you specified
    $('#wp-calendar a').click( function(e) {
        e.preventDefault() // Disable the link from going to a new page
        var url = $(this).attr("href"); // Pull the HRef for the link for making the AJAX request

        // This will make an AJAX request and put the result in the dialog.
        $("#dialog").empty().load(url, function() {

            // This is the callback for when the AJAX request finishes
            // All it does it open the dialog, which now has data in it
            $("#dialog").dialog("open");
        });
    });
});

Note: You'd need to install jQuery UI for this, and you'll probably want to read up on Dialog here . You'll need to take more steps if you'd want this to degrade gracefully, and depending on your markup. If you could post a snippet of a "day" on the calendar, I can try to tailor it to your needs.

---

Edit: Lets say that the file that return the rendered page for the event is "/ajax/event.php?id=123", you'd first want to prevent the link's default behavior (of navigating to a new page); then you'd want to use jQuery's load function to load an assembled URL's data into the dialog; once that request completes, you'd want to open the dialog. I've edited to code to do so, and it will degrade gracefully for user that don't have JavaScript enabled.