cssninjaStudio/fresh

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

  1. add initModals in import from ulils.js
  2. add in document.onreadystatechange = function () {
...
const modals = initModals();

Enjoy)

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:

  1. navbar will overlap the close button
  2. in modal mode, the backtotop button is again visible and active
  3. scrolling continues when the modal is open

I do not yet have a solution to these questions, but I continue to think about it.

You can submit the PR as is and I can fix the remaining points you shared.

il-s commented

Add PR #26

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.