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://cdn.jsdelivr.net/gh/kgsensei/[email protected]/custom.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kgsensei/[email protected]/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 normal 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:

Sizing A Modal

custom.css modals come in three sizes. Small, normal, and large. By simply adding the size class to the modal dialog div you can change the size of the modal. 
<div class="dialog {small|normal|large} radius-3">
You're always welcome to add your own size too, whatever works best for your project. Keep in mind, the size class will only work if the parent div has the .modal class.