Modal javascript code only works temporarily?

Question

Anyone can guess why this short script isn't working?

Oddly enough, I only got it to work on CodePen, and only temporarily (i.e. if it will work in the preview for a bit after you save and then stop)

https://gist.github.com/IlanVivanco/694a19541ba58590e149df9cdccef4aa

https://codepen.io/alain_invasion/pen/mdmXPgq

BulmaModal.js

class BulmaModal {
   constructor(modalButton) {
     const target = modalButton.dataset.target;

     if (target) {
       this.button = modalButton;
       this.modal = document.querySelector(target);
       this.html = document.querySelector("html");

       this.openEvent();
       this.closeEvents();
     }
   }

   show() {
     this.modal.classList.toggle("is-active");
     this.html.classList.add("is-clipped");

     this.onShow();
   }

   close() {
     this.modal.classList.toggle("is-active");
     this.html.classList.toggle("is-clipped");

     this.onClose();
   }

   openEvent() {
     this.button.addEventListener("click", (e) => {
       e.preventDefault();
       this.show();
     });
   }

   closeEvents() {
     const closeElements = this.modal.querySelectorAll(".modal-background, .modal-close");

     closeElements.forEach((element) => {
       element.addEventListener("click", (e) => {
         e.preventDefault();
         this.close();
       });
     });
   }

   onShow() {
     const event = new Event("modal:show");
     this.modal.dispatchEvent(event);
   }

   onClose() {
     const event = new Event("modal:close");
     this.modal.dispatchEvent(event);
   }
 }

 export default BulmaModal;

index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
<button class="modal-button" data-toggle="modal" data-target="#video">Open modal</button>

<div class="modal" id="video">
  <div class="modal-background"></div>
  <div class="modal-content">
    Lorem ipsum dolor sit amet
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

<script src="./main.js" type="module"></script>

main.js

import BulmaModal from './BulmaModal.js'

const modals = document.querySelectorAll("[data-toggle='modal']");
modals.forEach((modal) => new BulmaModal(modal));

/** show events */
document.querySelector(".modal").addEventListener("modal:show", (event) =>{ console.log(event) });

/** show events */
document.querySelector(".modal").addEventListener("modal:close", (event) =>{ console.log(event) });

note that this code can't work in a codepen, because you're mixing "regular JS" with "module code", so you probably want to use something like https://glitch.com/ so your code gets accepted by the browser when executed. Or rewrite it to "not a module", since that's probably not relevant to the problem. — Mike 'Pomax' Kamermans, Jul 27 '21 at 23:49
Yes, that could be it. Apparently modules don't work well locally and that codepen is a bit of hack. A proper online setup could do the trick. Thanks! — alain_invasion, Jul 28 '21 at 00:39
They work perfectly fine locally, what makes you say they don't? — Mike 'Pomax' Kamermans, Jul 28 '21 at 05:00
Locally= my local machine, not an online server. A quick search on this site confirms the problem https://stackoverflow.com/questions/52139811/javascript-module-not-working-in-browser — alain_invasion, Jul 28 '21 at 06:26
You might want to look into (Webpack)[https://webpack.js.org/guides/getting-started/] or similar bundling solutions. They compile and optimize Node.js-style code into "regular" js, including useful things like minification and source maps. — Aram Becker, Jul 28 '21 at 10:43
Thanks. This is a really tiny project, but I will keep it in mind for the future. — alain_invasion, Jul 28 '21 at 12:13
"locally" is not the same as "not using server": please explain exactly how you're running things in your post, because it's starting to sound like you're just loading things using `file:///` in which case _almost nothing will work_ because that's a severely locked down procotol compared to just running a web server on your dir (which doesn't even require installing a web server, `python -m http.server` or `npx run http-server` or something is more than enough). — Mike 'Pomax' Kamermans, Jul 28 '21 at 14:47
Ok, thanks for the additional clarification. Hope it will help others avoid the issue like I did. — alain_invasion, Jul 29 '21 at 23:33

alain_invasion · Accepted Answer · 2021-07-28T06:27:58.090

-1

If anyone has the same issue: javascript modules just don't work on a local PC or on CodePen. So if you find yourself in the same situation, the solution is either to work on a web server (either local or online) or edit the script to avoid modules altogether (which is what I did)

edited Jul 28 '21 at 06:27

answered Jul 28 '21 at 00:46

alain_invasion

1
2

modules work perfectly fine locally, I use them every day, just remember that modules _need the module type_ or they don't work, and _need to properly follow module restrictions_. – Mike 'Pomax' Kamermans Jul 28 '21 at 05:00
Locally= my local machine, without a web server. A quick search on this site confirms the problem https://stackoverflow.com/questions/52139811/javascript-module-not-working-in-browser – alain_invasion Jul 28 '21 at 06:28
No it doesn't, because again: I use modules locally (on my own machine, in the browser) just fine. Literally hundreds of them, every hour. So your recommendation _makes no sense_: as long as you load your web content normally, the browser doesn't care what the domain is. If you're working locally, you run a localhost server, done, it works exactly the way it's supposed to. "locally" is not the same as "on file:///". **never** load web content from file, because the browser security model rejects almost everything when you do. That's why you run `python -m http.server` or the like on your dir. – Mike 'Pomax' Kamermans Jul 28 '21 at 14:42
Ok, thanks for the additional clarification. Hope it will help others avoid the issue like I did. – alain_invasion Jul 29 '21 at 23:33

Modal javascript code only works temporarily?

1 Answers1