Question

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

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

是否有可能以这样的方式修改greybox或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。如果您希望优雅地降级，并且取决于您的标记，则需要采取更多步骤。如果您可以在日历上发布“日期”片段，我可以尝试根据您的需求进行定制。

编辑：假设返回事件呈现页面的文件是“/ajax/event.php?id=123”，您首先想要阻止链接的默认行为（导航到新页面））;然后你想使用jQuery的加载函数将汇编的URL数据加载到对话框中;一旦该请求完成，您就要打开对话框。我已编辑代码来执行此操作，对于未启用JavaScript的用户，它会优雅地降级。

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

1 个答案: