Custom.css Ext: Modals Docs


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:
    :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;
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
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="">Terms of Service</a>
            <a class="link primary" target="_blank" href="">Privacy Policy</a>
        <div class="footer">
            <button class="btn btn-outline triary" id="exampleModal_Close">Close</button>
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_Close").ael("click", () => {
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: