cssninjaStudio / fresh

🚀 Free Astro Landing page starter

Home Page:https://fresh.cssninja.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Modal window does not work on demo page

il-s opened this issue · comments

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 ...

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!

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.

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.

commented

Thank you very much! Everything works as it should.