Custom.css Ext: Modals Docs


Setup/Installation

Since the modals library requires the base custom.css library, you'll need to add both. In the head tag, just add these lines of code:
<style>
    :root {
        --kg-bg: rgb(25, 32, 40);
        --kg-fg: rgb(225, 225, 245);
        --kg-fg-darker: rgb(190, 190, 190);

        --kg-primary: rgb(30, 172, 244);

        --kg-font: Helvetica, sans-serif;
    }
</style>
<link rel="stylesheet" href="https://dev.kgsensei.dev/custom.min.css">
<link rel="stylesheet" href="https://dev.kgsensei.dev/custom.modal.min.css">
We highly recommend learning more about the custom.css library before using the modals extension.

Adding A Modal

Here's some basic HTML code for adding a modal!
<div class="modal" id="exampleModal">
    <div class="dialog radius-3">
        <div class="header">Modal Title/Header</div>
        <div class="content">
            <a class="link primary" target="_blank" href="https://example.com/terms">Terms of Service</a>
            <br>
            <a class="link primary" target="_blank" href="https://example.com/privacy">Privacy Policy</a>
        </div>
        <div class="footer">
            <button class="btn btn-outline triary" id="exampleModal_Close">Close</button>
        </div>
    </div>
</div>>
Great! Now lets make it actually work, we'll be doing this with some simple.js code, this example includes code from the simple.js animation extension too.
gid("exampleModal_Open").ael("click", () => {
    gid("exampleModal").fadeIn(250)
})

gid("exampleModal_Close").ael("click", () => {
    gid("exampleModal").fadeOut(250)
})
Now that we have the code written, lets test it with some buttons!
<button class="btn btn-outline primary" id="exampleModal_Open">Open Modal</button>
And here's what we made: