Dialog

Demo | API Docs | Themes

An interactive dialog includes alert, confirm, notification and modal dialogs. But can be used in Browser and TypeScript project.

Getting Started

For SPA (Single Page Application)

Use npm install @bndynet/dialog to install package, and import them like below:

import { alert, confirm, notify, loading, loadingFor, iframe, element } from "@bndynet/dialog";

For Website

The UMD build is also available on unpkg.com, and you can add to your website like:

<link href="https://unpkg.com/@bndynet/dialog/dist/dialog.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/@bndynet/dialog/dist/dialog.umd.js"></script>

<script>
    dialog.setup({
        theme: "your-theme",    // will be appended the `class` attribute of `body` tag, more themes please see https://github.com/bndynet/dialog-themes
        labelOK: "OK",
        labelCancel: "Cancel",
        animate: true,
        notificationAutoClose: true,
        notificationClickClose: true,
        notificationCloseDelay: 3000,
        notificationTheme: "default",
        notificationPlacement: "bottom right",
        notificationMaxItems: 3,
        notificationSquare: false
    });

    dialog.setTheme("theme");

    dialog.alert("content", function() {});
    dialog.alert("title", "content", function() {});

    dialog.confirm("content", function() {});   // same as `dialog.confirm("content").then(function() { })`
    dialog.confirm("title", "content", function() {});  // same as `dialog.confirm("title", "content").then(function() { })`

    dialog.notify("Message"[, "success"|"warning"|"error"]);
    dialog.notify({message: "message", theme: "success"});

    dialog.loading();
    dialog.loading(false);  // hide the global loading box
    dialog.loading({text: "Loading"});

    dialog.url('http://bndy.net', 'Title'[, {width: '80%', height: '80%'}]);
    dialog.element('formId', 'Form Title'[, {width: '80%', height: '80%'}]);

    // loading box for element
    var elLoading = dialog.loadingFor("#id", "Loading...", "#00ff00");
    elLoading.hide();
</script>