Modal window does not work on demo page
il-s opened this issue · 7 comments
il-s commented
As far as I understood, the modal window should appear when you click on Log in, but nothing happens. Apparently the modal-trigger handler got lost somewhere ...
il-s commented
Solution path:
add in src/js/libs/utils/utils.js
export function initModals() {
let targets = document.querySelectorAll(".modal-trigger");
if (typeof targets != "undefined" && targets != null) {
for (var i = 0, len = targets.length; i < len; i++) {
targets[i].addEventListener('click', function (event) {
console.log('click modal');
var modalID = this.getAttribute('data-modal');
document.querySelector('#' + modalID).classList.add('is-active');
})
}
}
targets = document.querySelectorAll(".modal-close");
if (typeof targets != "undefined" && targets != null) {
for (var i = 0, len = targets.length; i < len; i++) {
targets[i].addEventListener('click', function (event) {
console.log('click modal close');
this.closest('.modal').classList.remove('is-active');
})
}
}
}
in js/main.js
- add initModals in import from ulils.js
- add in document.onreadystatechange = function () {
...
const modals = initModals();
Enjoy)
Deleted user commented
Hi, thanks for this contribution. Would you be kind to submit it as a PR? I'll review it and merge it then. Thanks!
il-s commented
There are still problems there:
- navbar will overlap the close button
- in modal mode, the backtotop button is again visible and active
- scrolling continues when the modal is open
I do not yet have a solution to these questions, but I continue to think about it.
Deleted user commented
You can submit the PR as is and I can fix the remaining points you shared.
Deleted user commented
Thanks for your PR. I also made some changes to include what you've asked for. Please test and close the issue if you're ok with it.
il-s commented
Thank you very much! Everything works as it should.