JSFiddle - React, Tailwind, and code Playground
JavaScript
(function ($) {
function MenuModal(options) {
this.$menu = $('#header');
this.timeout = 1300;
this.$modalOpeners = $('[data-modal]');
this.$clonedMenu = null;
this.$menuParent = null;
this.$menuCard = null;
this.$content = null;
this.formHtml =
'<form class="contactForm contact-form">' +
'<label class="contact-form__label" for="phone-input">Введите телефон</label>' +
'<input class="contact-form__input" ' +
'type="text" required ' +
'placeholder="89532240512" ' +
'class="phone-input" />' +
'<label class="contact-form__label" for="name-input">Введите имя</label>' +
'<input class="contact-form__input" type="text" ' +
'required ' +
'placeholder="Иван" ' +
'class="name-input" />' +
'<input class="contact-form__back" type="button" value="назад" />'+
'<button class="contact-form__submit" type="submit">Отправить</button>'+
'</form>';
}
MenuModal.prototype.init = function () {
this.$modalOpeners.on('click', this.showModal.bind(this));
this.$modalOpeners.trigger('click');
};
MenuModal.prototype.showModal = function (e) {
e.preventDefault();
this.getParent(e.currentTarget);
this.cloneMenu();
this.toggle();
setTimeout(function () {
this.renderContent(this.formHtml);
this.toggle();
}.bind(this), this.timeout);
};
MenuModal.prototype.toggle = function(){
this.$menuCard.toggleClass('loaded');
};
MenuModal.prototype.renderContent = function (content) {
this.$content.html(content);
};
MenuModal.prototype.getParent = function (elem) {
var $target = $(elem);
var $parent = $target.parents('#block1');
...