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

Тема в разделе "NetCat", создана пользователем RedoxKit, 28 фев 2014.

  1. RedoxKit

    RedoxKit Создатель

    Регистр.:
    7 окт 2008
    Сообщения:
    25
    Симпатии:
    2
    Здравствуйте!
    Подскажите, как в netcat 5.xx сделать чтобы при клике по элементу, например по ссылке, открывалось модальное окно и в него подгружался контент с другой страницы сайта?
    Нужно сделать модальное окно и показать в нём в нём содержимое страницы http://site.ru/page.html?isNaked=1
    На основе этого сделал, но используется скрипт самого netcat. Стоит выйти из админки и модальное окно пропадает, т.е. содержимое страницы http://site.ru/page.htm заружается, но отображается не в модальном окне, а просто по верх текста основной страниц без её затемнения и кнопки закрыть модальное окно нет.
    Хотелось бы с "чистого листа" так сказать универсальный пример.
    ajax, java и jquery только начинаю осваивать.
    Спасибо!
     
    Последнее редактирование: 28 фев 2014
  2. alterfall

    alterfall Создатель

    Регистр.:
    15 апр 2012
    Сообщения:
    37
    Симпатии:
    2
    Код:
    // Вызов модального окна
        $('[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
     
    Последнее редактирование: 3 мар 2014
  3. RedoxKit

    RedoxKit Создатель

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

    alterfall Создатель

    Регистр.:
    15 апр 2012
    Сообщения:
    37
    Симпатии:
    2
    В начале или в конце вашего файла отведите место для запуска jQuery
    Код:
    // jQuery
    (function($) {
        $(function() {
          // Любой jQuery код вставлять сюда
      });
    })(jQuery)
    Если у вас появится еще jQuery код то его также в это место вставлять а не создавать под него новое
    Это инициализирует его при загрузке страницы.