模态javascript代码只能暂时工作?

Question

有人能猜到为什么这个短脚本不工作吗?

奇怪的是，我只让它在CodePen上工作，而且只是暂时的(即如果它在你保存然后停止后在预览中工作一段时间)

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) });

Answer 1

如果有人有同样的问题:javascript模块只是不能在本地PC或CodePen上工作。因此，如果您发现自己处于相同的情况，解决方案是在web服务器上工作(本地或在线)或编辑脚本以完全避免模块(这就是我所做的)