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

Question

[Cerega32]

Изучаю сейчас js и решил сделать функцию конструктор для модального окна. В функции прописал, что по нажатию на кнопку должен выполняться метод открытия окна, но ничего не происходит. Но если вызвать через напрямую, то окно открывается. Тоже самое касается и подложки.
https://jsfiddle.net/6d3rxmh2/1/
А также хотелось бы узнать правильно ли я в общем написал эту функцию, а также функцию закрытия модального окна по нажатию на escape?

Comments

[Alex]

Небольшая рекомендация.
Вместо объявления методов внутри функции-конструктора, объявляйте их как методы прототипа

// Плохо
function Modal(options) {
  this.open = function () {}
}

// Хорошо
function Modal(options) {
}

Modal.prototype.open = function () {}

// Лучше всего
class Modal {

  open() {}
}

[Алексей]

Вы события описали внутри функции, если она не вызвана каким образом отслеживается например

this.btn.onclick = popup.open;
$(document).keyup(function(e) {
});

зачем объявлена var popup = this;
если дальше нигде не используется?

[Cerega32]

Алексей, а вы можете объяснить почему в этом коде
https://jsfiddle.net/2Lzd1ys9/1/
вызов на 52 строке через 7 строку работает, а через восьмую нет?

[Алексей]

Cerega32, let overlay = $('.overlay') это объект JQ.
let overlay = document.querySelector('.overlay') это элемент дом.
let overlay = $('.overlay')[0] это тоже элемент дом из объекта JQ.
Банально console.log/dir(overlay/typeof overlay) расскажет почему вы не дотянулись до объекта.
Я бы если пользовался JQ то почитал бы что там под капотом. Но если честно нативного JS в какой-то момент стало хватать с головой.

[Robur]

У вас проблема с this.btn.onclick = popup.open;
должно быть this.btn[0].onclick = popup.open;
ну или использовать методы JQuery на this.btn. this.btn.click(popup.open);
В целом код еще улучшать и улучшать но это все с опытом приходит.