Toolkit

TK.Popup

{
    _: "button",
    innerHTML: "Open popup",
    onclick: function() {
        this.Add({
            _: TK.Popup,
            Title: "Example Title",
            EnableCloseButton: true, // Default: True
            EnableBackDrop: true, // Default: false
            EnableResize: true, // Default: true
            Width: 500, 
            Height: 250,
            Template: {
                innerHTML: "This is the popup contents"
            }
        });
    }
}

Popup with button bar

{
    _: "button",
    innerHTML: "Open popup 2",
    onclick: function() {
        this.Add({
            _: TK.Popup,
            Title: "Example Title",
            EnableCloseButton: true, // Default: True
            EnableBackDrop: true, // Default: false
            EnableResize: true, // Default: true
            Width: 500, 
            Height: 250,
            Template: {
                innerHTML: "This is the popup contents"
            },
            Buttons: {
                Apply: function() {
                    return !confirm("Apply changes and close popup?");
                },
                Cancel: {
                    Text: "Close this popup!",
                    Click: function() {
                        alert('Button pressed');
                    }            
                }
            }
        });
    }
}

Popup with ability to close by pressing ESC or clicking on the backdrop

{
    _: "button",
    innerHTML: "Open popup",
    onclick: function() {
        this.Add({
            _: TK.Popup,
            Title: "Example Title",
            EnableCloseButton: true, // Default: True
            EnableBackDrop: true, // Default: false
            EnableResize: true, // Default: true
            CloseWithEscapeButton: true, // Default: false
            CloseByClickingOutsideOfPopup: true, // Default: false
            Width: 500, 
            Height: 250,
            Template: {
                innerHTML: "This is the popup contents"
            }
        });
    }
}