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

Question

我有一个网站在这里展示了很多产品

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

你能建议一种方法吗？

我正在使用Joomla

Answer 1

您可以使用.load（）和jQuery UI对话框：

$('.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应该只返回对话框的内容，而不是整个页面