Modal

[Serhatpars]

I've never been able to make a Modal. can you help please? thank you!

https://siimple.xyz/docs/elements/modal

[jmjuanes]

Hello! As I see, the JavaScript code for running the modal example is missing in the documentation 😕, sorry...

Please try this HTML code:

<div id="modal" class="scrim is-hidden">
    <div class="modal">
        <div class="is-flex has-items-center">
            <div class="title is-4 has-mb-0">Modal</div>
            <div class="close has-ml-auto"></div>
        </div>
        <div class="has-pt-6">
            Content of the modal
        </div>
    </div>
</div>

(Note that I have added an id="modal" attribute to the scrim's <div> element and also the class is-hidden to hide the modal by default).

Now, if you have for example a button with the ID display-modal-btn, you can use the following JavaScrit code for displaying the modal:

document.getElementById("#display-modal-btn").addEventListener("click", () => {
    document.getElementById("modal").classList.remove("is-hidden");
});

And to hide the modal when the x button is clicked:

document.querySelector("#modal .close").addEventListener("click", () => {
    document.getElementById("modal").classList.add("is-hidden");
});

Please tell me if this works for you.