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

Question

我想知道是否可以调整灰框或阴影框窗口的大小和位置以显示在某个 div 元素中？

我正在为 wordpress 网站创建模板，并且我使用的是默认日历，但是当您单击日历内的日期时，默认操作是在新窗口中打开它。

是否可以修改 graybox 或 shadowbox，当您单击日期时，该框会在日历上打开并显示其中的内容，而不是新页面？

或者是否有其他方法可以达到预期的效果，可能使用 jQuery 或 Javascript？

任何帮助将不胜感激，谢谢！

Answer 1

jQuery UI 有一个名为Dialog 的小部件可以实现您的结果。你可以这样使用它：

$(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");
        });
    });
});

注意：您需要为此安装 jQuery UI，并且您可能需要阅读 Dialog here。如果您希望它优雅地降级，并且取决于您的标记，您将需要采取更多步骤。如果您可以在日历上发布“一天”的 sn-p，我可以尝试根据您的需要进行调整。

---

编辑：假设为事件返回呈现页面的文件是“/ajax/event.php?id=123”，您首先要阻止链接的默认行为（导航到新页面);那么你会想使用 jQuery 的 load 函数将组装好的 URL 的数据加载到对话框中；一旦该请求完成，您就会想要打开对话框。我已经编辑了这样做的代码，对于没有启用 JavaScript 的用户，它会优雅地降级。