如何在对话框中显示详细信息而不是加载新页面？

Question

我有一个显示lots of products here

的网站

当您点击每个产品的product details链接时，它会导航到另一个页面。我希望在当前页面的弹出/对话框中显示详细信息。

你能建议一种方法吗？

我正在使用Joomla

Answer 1

您可以使用.load()和jQuery UI Dialog：

$('.class for links').click(function(e) {
    var url = this.href; // get the current href
    var dialog = $("#dialog");
    if ($("#dialog").length == 0) { // create dialog if it doesnt already exist
        dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body');
    } 

    // load remote content
    dialog.load(
         url,
         {},
         function(responseText, textStatus, XMLHttpRequest) {
             dialog.dialog(); // show the dialog
         }
    );
    //prevent the browser following the link
    e.preventDefault();
});

请注意，用于获取内容的URL应该只返回对话框的内容而不是整个页面