TmBox

by Tanuel

TmBox is a lightweight JavaScript Plugin that allows you to somewhat recreate the functionality of native JS Alerts, Confirms and Prompts, but has more possibilities of styling and callbacks

This plugin doesnt need any other Library

Download here or view the source on Github

Examples (JS source code)

Linking the files


<link rel="stylesheet" href="tmBox.css">
<script src="tmBox.js"></script>

Usage

HTML

<div>
    <button id="showConfirmBox">ConfirmBox</button>
    <button id="showAlertBox">AlertBox</button>
    <buttonid="showInputBox">InputBox</button>
</div>

Javascript: (simple Usage)

$(document).ready(function(){
    $("#showConfirmBox").click(function(){
        var box = new TmBoxConfirm("this is a tmBoxConfirm");
        //box.setMessage("ConfirmBox");
        box.onConfirm(function(){
            console.log("confirmed");
        });
        box.onCancel(function(){
            console.log("canceled");
        });
        box.display();
    });
    
    $("#showAlertBox").click(function(){
        var box = new TmBoxAlert("this is a tmBoxAlert");
        //box.setMessage("AlertBox");
        box.onConfirm(function(){
            console.log("confirmed");
        });
        box.display();
    });
    
    $("#showInputBox").click(function(){
        var box = new TmBoxPrompt("this is a tmBoxPrompt");
        //box.setMessage("InputBox");
        box.onConfirm(function(input){
            console.log("confirmed with input "+input);
        });
        box.onCancel(function(input){
            console.log("canceled with input "+input);
        });
        box.display();
    });

});

JavaScript - TmBoxAlert (with options)

var box = new TmBoxAlert({
    title: "Title",
    message: "This is an alert",
    onConfirm: function (){
        console.log("alert confirmed);
    },
    button: {
        class: "customClass",
        label: "Custom Label"
    }
});

JavaScript - TmBoxConfirm (with options)

var box = new TmBoxConfirm({
    title: "Confirm this please",
    message: "This is a TmBoxConfirm",
    onConfirm: function (){
        console.log(confirmed by option");
    },
    onCancel: function (){
      console.log("canceled by Option")  
    },
    buttonConfirm: {
        class: "customConfirmClass",
        label: "Confirm Label"
    },
    buttonCancel: {
        class: "customCancelClass",
        label: "Cancel Label"
    }
});

JavaScript - TmBoxPrompt(with Optionen)

var box = new TmBoxPrompt({
    title: "TmBoxPrompt",
    message: "This is a TmBoxPrompt",
    input: {
        value:"Default Value",
        placeholder: "Placeholder",
        class: "customInputClass",
        type: "text"
    },
    onConfirm: function (value){
        console.log("Confirmed with value "+value);
    },
    onCancel: function (value){
      console.log("Canceled with value "+value);
    },
    buttonConfirm: {
        class: "customConfirmClass",
        label: "Confirm Label"
    },
    buttonCancel: {
        class: "customCancelClass",
        label: "Cancel Label"
    }
});