如何重新调整大小和重新定位shadowbox / greybox窗口以显示在某个div元素中？

问题描述：

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!

我想知道是否可以重新调整灰度框或阴影框窗口的大小并重新定位以显示在某个div元素中？ p>

我正在为wordpress网站创建一个模板，我正在使用默认日历，但当你点击日历里面的日期时，默认操作是在新窗口中打开它。 p>

是否可以修改greybox或shadowbox，以便当您点击日期时，该框会在日历显示时打开它中的内容，而不是一个新的页面？ p>

或者是否有其他方法可以实现所需的结果，可能使用jQuery或Javascript？ p>

任何帮助都会非常感谢，提前谢谢！ p> div>

答

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.

如何重新调整大小和重新定位shadowbox / greybox窗口以显示在某个div元素中？

相关推荐