Modal

Documentation

JavaScript

var Components = require("gd-sprest-bs").Components;

// Create the modal
var el = document.querySelector("#modalDemo");
var modal = Components.Modal({
    el: el,
    id: "bsModalDemo",
    title: "Modal Demo",
    body: "This is the body of the modal.",
    button: {
        text: "Open Modal",
        toggle: "modal",
        target: "#bsModalDemo"
    }
});

TypeScript

import { Components } from "gd-sprest-bs";

// Create the modal
let el = document.querySelector("#modalDemo");
let modal = Components.Modal({
    el: el,
    id: "bsModalDemo",
    title: "Modal Demo",
    body: "This is the body of the modal.",
    button: {
        text: "Open Modal",
        toggle: "modal",
        target: "#bsModalDemo"
    }
});

Web Component

// Return the modal properties return { button: { text: "Open Modal", toggle: "modal", target: "#bsModalDemo" } };
<script type="text/javascript" src="https://unpkg.com/gd-sprest-bs/wc/dist/gd-sprest-bs.js"></script>
<bs-modal id="wcModalDemo" title="Modal Demo" body="This is the body of the modal.">
    // Return the modal properties
    return {
        button: {
            text: "Open Modal",
            toggle: "modal",
            target: "#bsModalDemo"
        }
    };
</bs-modal>

References

Modal(props:IModalProps):IModal

ModalTypes

Name Value
Danger 1
Dark 2
Info 3
Light 4
Primary 5
Secondary 6
Success 7
Warning 8

IModal

Name Returns Description
el Element The jquery element.

IModalProps

Name Type Description
button IButtonProps Renders a button to open the modal.
className string The class name to apply to modal.
content string The modal content.
el HTMLElement The element to render the modal to.
header string The modal header.
href string Renders the modal as an anchor element instead of a span element.
isPill boolean Adds the ‘modal-pill’ class name.
type number The modal type. Reference the ModalTypes enumerator