Как вывести эффект модального окна в кнопку?

Question

[Victor0816]

Привет всем.
Есть скрипт модального окна: https://codepen.io/dodozhang21/pen/PwGLar/
<div id="dialogEffects" class="sally">
Данный div отвечает за смену эффектов при открытии модального окна
Не могу понять каким образом class="sally" передается в модальное окно
Сам скрипт

(function($) {
  var dialog;
  $('.trigger').on('click', function() {
    dialog = $('#' + $(this).data('dialog'));
    $(dialog).addClass('dialog--open');
  });
  $('.action, .dialog__overlay').on('click', function() {
    $(dialog).removeClass('dialog--open');
    $(dialog).addClass('dialog--close');
    $(dialog).find('.dialog__content').on('webkitAnimationEnd MSAnimationEnd oAnimationEnd animationend', function() {
      $(dialog).removeClass('dialog--close');
    });
  });
  
  
  
  
  
  
  $('.dialogEffects').on('click', function(e) {
    e.preventDefault();
    $('.dialogEffects').removeClass('selected');
    $(this).addClass('selected');
    var cssClass = $(this).data('class');
    $('#dialogEffects').removeAttr('class').addClass(cssClass);
  });
})(jQuery);

Как сделать что бы эффект указывался при вызове в кнопке?

<button data-dialog="somedialog" class="trigger">Open Dialog</button>

Answer 1

[Андрей]

$('.dialogEffects').on('click', function(e) {
    e.preventDefault();
    $('.dialogEffects').removeClass('selected');
    $(this).addClass('selected');
    var cssClass = $(this).data('class'); // Тут получаем название data-class атрибута 
    $('#dialogEffects').removeAttr('class').addClass(cssClass); // Здесь уже из переменной cssClass (В которой хранится полученный data-class атрибут) добавляем новый класс для #dialogEffects
  });
})(jQuery);

UPD В случае с вашем примером, будет как-то так:

<button data-dialog="somedialog" data-class="sally" class="trigger">Open Dialog</button>