Ajax загрузка в модальное окно

[RedoxKit]

Здравствуйте!
Подскажите, как в netcat 5.xx сделать чтобы при клике по элементу, например по ссылке, открывалось модальное окно и в него подгружался контент с другой страницы сайта?
Нужно сделать модальное окно и показать в нём в нём содержимое страницы Для просмотра ссылки Войди или Зарегистрируйся
На основе Для просмотра ссылки Войди или Зарегистрируйся сделал, но используется скрипт самого netcat. Стоит выйти из админки и модальное окно пропадает, т.е. содержимое страницы Для просмотра ссылки Войди или Зарегистрируйся заружается, но отображается не в модальном окне, а просто по верх текста основной страниц без её затемнения и кнопки закрыть модальное окно нет.
Хотелось бы с "чистого листа" так сказать универсальный пример.
ajax, java и jquery только начинаю осваивать.
Спасибо!

 

[alterfall]

// Вызов модального окна
    $('[data-ajaxload]').on('click',function(){
      $.ajax({
        url: $(this).attr('data-ajaxload'),
        data:{isNaked:1,modal:1},
        type: "POST",
        error: function(){alert('Ошибка')},
        success: function(response){
          $("#modal").html(response)
        },
        complete: function(){
          $('#modal,#fade').fadeIn('fast')
        }
      })
      return false;
    })
// Закрытие окон
    $('.close').click(function(){
      $('#modal,#fade').fadeOut('fast')
    })

response является ответом в js так положено. Аякс обращается к странице указанной в url помещает все что получил (то что видите вы когда переходите по адресу с параметрами то увидит и он) в response или html. Далее мы заменяем содержимое #modal на полученное.

Модальное окно. В любое место макета

<div id='modal' class='modal'></div><div id='fade' class='close'></div>

Ссылка для вызова как пример. На деле к любому элементу добавьте атрибут data-ajaxload.

<a href='#' data-ajaxload='/page.html'>Открыть модальное окно</a>

CSS

#fade { width:100%; height:100%; position:fixed; top:0px; left:0px; display:none; opacity:0.5}
#modal{ width:800px; position:fixed; top:10%; display:none; left:50%; margin:0 0 0 -400px; background:white; border-radius:5px; box-shadow:0 0 5px rgba(0,0,0,0.5); padding:15px;}

Это простейший пример работать будет на любом сайте, не только NetCat.
Вам необходимо только подключить jQuery не забыть и все. Других каких либо библиотек не нужно. Это слишком просто чтобы для этого делать библиотеку (SimpleModal). В NetCat вы можете использовать <?=nc_js()?> для подключения скриптов идущих с системой.
data-ajaxload данный атрибут отвечает за вызов окна и содержит ссылку на страницу. Все это можно проделать с href и классом но некоторые особенные браузеры откроют href как положено и проигнорируют return false. Поэтому я и использовал для примера атрибут data-.
Атрибут или id а также классы можете переназвать по своему

Больше информации по работе с системой вы можете узнать на официальном форуме CMS

 

[RedoxKit]

Спасибо большое. Подскажите ещё:
Первый, приведённый вами код куда нужно вставить?
Не хочется делать его отдельным .js файлом, а как вставить в существующий файл (scritp.js), в котором уже что то есть не понимаю. Подскажите, в какое место существующего файла можно вставить этот код. Пробовал вставлять после всего того, что уже есть в файле - не работает.

 

[alterfall]

В начале или в конце вашего файла отведите место для запуска jQuery

// jQuery
(function($) {
    $(function() {
      // Любой jQuery код вставлять сюда
  });
})(jQuery)

Если у вас появится еще jQuery код то его также в это место вставлять а не создавать под него новое
Это инициализирует его при загрузке страницы.