cssninjaStudio / fresh

🚀 Free Astro Landing page starter
https://fresh.cssninja.io
MIT License
625 stars 147 forks source link

Modal window does not work on demo page #25

Closed il-s closed 3 years ago

il-s commented 3 years ago

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 3 years ago

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)

cssninjaStudio commented 3 years ago

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 3 years ago

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.

cssninjaStudio commented 3 years ago

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

il-s commented 3 years ago

Add PR #26

cssninjaStudio commented 3 years ago

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 3 years ago

Thank you very much! Everything works as it should.