Как можно переписать код чтобы автоматизировать открытие модальных окон?

Question

$(document).on('click', '.lawcen', function(){
  event.preventDefault();
  var id = $('.modalyak'),
  top = $(id).offset().top;
  $('body,html').animate({scrollTop: top}, 0);
  $('.modal-lawcen').fadeIn();
});

$(document).on('click', '.exzaim', function(){
  event.preventDefault();
  var id = $('.modalyak'),
  top = $(id).offset().top;
  $('body,html').animate({scrollTop: top}, 0);
  $('.modal-exzaim').fadeIn();
});

Сейчас нужно для каждого модального окна прописывать js-код, можно ли как то заменить это на шаблон?

Answer 1

Можно присвоить всем одинаковые классы. Вместо .lawcen, .exzaim сделать .modal-btn например. Вместо .modal-lawcen, .modal-exzaim сделать .modal.

И соответственно одно модальное окно на странице оставить. Одну html разметку.

Если так принципиально использовать указанные классы, то:

let modalsData = ['lawcen', 'exzaim'];

for (let modal of modalsData) {
    $(document).on('click', `.${modal}`, function(){
      event.preventDefault();
      var id = $('.modalyak'),
      top = $(id).offset().top;
      $('body,html').animate({scrollTop: top}, 0);
      $(`.modal-${modal}`).fadeIn();
    });
}

Ещё вариант через data атрибуты:

html

<input type="button" value="go" data-modal-type="lawcen" class="lawcen"/>
<input type="button" value="go2" data-modal-type="exzaim" class="exzaim"/>

js

$(document).on('click', `.modal-btn`, function(){
    event.preventDefault();
    var id = $('.modalyak'),
    top = $(id).offset().top;
    $('body,html').animate({scrollTop: top}, 0);
    $(`.modal-${$(this).data().modalType}`).fadeIn();
});

Answer 2

$(document).on('click', '.lawcen, .exzaim ', function() {
  event.preventDefault();
  var id = $('.modalyak'),
    top = $(id).offset().top;
  $('body,html').animate({ scrollTop: top }, 0);
  $('.modal-' + this.className).fadeIn();
});

БЛОГ НА HUSL

Как можно переписать код чтобы автоматизировать открытие модальных окон?

Ответы (2 шт):