Показать сообщение отдельно
  #3 (permalink)  
Старый 31.03.2015, 05:03
Профессор
Отправить личное сообщение для Infinity178 Посмотреть профиль Найти все сообщения от Infinity178
 
Регистрация: 13.04.2014
Сообщений: 187

$.get( "ajax/load.php", function(data) {
  if(data){ 
     if(btn.is('[data-type="price"]')){
       modal_main.html(data.price).hide().show("fade", 1000 );
     } else if(btn.is('[data-type="callme"]')){
       modal_main.html(data.callme).hide().show("fade", 1000);
     }
  }
});


ajax/load.php - PHP файл, в нем список TPL файлов + GET параметры к шаблону
btn - это кнопка в HTML
<!-- пример кнопки -->
<a href="#" 
     class="fc_btn icon-phone-squared"
     data-ajax="ajax_btn" 
     data-header="Заказать звонок" 
     data-type="callme">
     Заказать звонок
</a>


т.е. суть какая:
есть web-сайт, на нем "N" кол-во форм (заказать звонок, купить в один клик, обратная связь, оставить комментарий и т.п.)..
Практически все формы должны быть в модальном окне.
Логика происходящего:
1. HTML скелет модального окна
<div class="box-modal" id="ajax_modal">
   <div class="box-modal_header">
      <div class="box-modal_name"></div>
        <div class="box-modal_close">x</div>
      </div>
   <div class="box-modal_content"></div>
</div>

2. JS функция вызывающая модальное окно
$(document).on('click', '[data-ajax="ajax_btn"]', function(){
  var modal_name = $(this).attr('data-header');
  var modal_main = $('#ajax_modal').find('.box-modal_content');
  $('#ajax_modal').find('.box-modal_name').html(modal_name);
  $('#ajax_modal').modal({ /*.. тут GET AJAX ..*/});
  return false;
});

3. Ajax GET загружаем в .box-modal_content нужную нам форму в зависимости от нажатой кнопки

В зависимости от атрибутов кнопки (по которой кликнули) у нас происходит заполнение модального окна и соответственно показывается нужная форма.

- - - - - - - - -
А теперь еще возвращаемся к вопросу! Как можно записать применяемые эффекты к data.* что бы было по принцепу:
var str = $(this);

?
Ответить с цитированием