Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including @bndynet/dialog with all npm packages installed. Try it out:

var dialog = require("@bndynet/dialog")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@bndynet/dialog v2.9.1

An interactive dialog for browser includes alert, confirm and notifications

Dialog

Demo | API Docs | Themes

npm Build Status Coverage Status Code Styles

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>

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free