Как я могу показать детали в диалоге вместо загрузки новой страницы?

Question

У меня есть сайт, показывающий много продуктов здесь

Когда вы нажимаете на ссылку 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, используемый для получения контента, должен просто возвращать контентдиалога не вся страница