Beautiful & Functional Custom Dialogs In JavaScript – Dialog-JS

Category: Javascript , Modal & Popup | March 30, 2024
Author:mobilepadawan
Views Total:36 views
Official Page:Go to website
Last Update:March 30, 2024
License:MIT

Preview:

Beautiful & Functional Custom Dialogs In JavaScript – Dialog-JS

Description:

Dialog-JS is a lightweight JavaScript library that allows you to create sleek, customizable dialog boxes for your web applications.

Standard browser popup boxes are functional but rigid and lack the ability to match the aesthetic and functionality of modern web applications. Dialog-JS addresses this by allowing you to create beautiful, themeable dialog boxes with custom titles, messages, buttons, and callbacks.

How to use it:

1. Download and load the following files in the document.

<!-- Default Theme -->
<link rel="stylesheet" href="dialogjs-default-VERSION.min.css" />
<!-- iOS Theme -->
<link rel="stylesheet" href="dialogjs-ios-VERSION.min.css" />
<!-- Material Design Theme -->
<link rel="stylesheet" href="dialogjs-material-VERSION.min.css" />
<!-- Bootstrap Theme -->
<link rel="stylesheet" href="dialogjs-bootstrap-VERSION.min.css" />
<script src="Dialog-JS.VERSION.min.js"></script>

2.  Create an alert dialog with a custom title, message, and button text using the Dialog.alert() method. It’s perfect for situations where you need to display important information or notifications to your users.

Dialog-JS Alert Box Default Theme

Alert Dialog – Default Theme

Dialog.alert({
  title: "Alert Dialog",
  text: "This is a basic alert dialog",
  buttonText: "Accept",
})

3. Create a confirmation dialog with a custom title, message, and button texts for both confirmation and cancellation. Plus, you can specify a callback function to execute when the user confirms the action.

Dialog-JS Confirm Box iOS Theme

Confirm Dialog – iOS Theme

Dialog.confirm({
  title: "Confirm Dialog",
  text: "Are You Sure To Delete This Entry?",
  defaultButtonText: "Accept",
  cancelButtonText: "Cancel",
  callBackFn: function() {
    // do something
  }
})

4. The Dialog.prompt() method lets you create a prompt dialog with a custom title, message, input placeholder, and buttons for confirmation and cancellation. You can even specify a callback function to receive the input value once the user confirms their entry.

Dialog-JS Prompt Box Material Design Theme

Prompt Dialog – Material Design Theme

Dialog.prompt({
  title: "Prompt Dialog",
  text: "Enter your information here:",
  placeholderInput: "Hit Confirm and see the console log...",
  confirmButtonText: "Confirm",
  cancelButtonText: "Cancel",
  callBackFn: function(texto){
    console.log("You Typed: " + texto)
  }
})

Changelog:

03/30/2024

  • Update theme styles

03/28/2024

  • Another fine tuning over iOS styles

03/27/2024

  • JS & CSS update

You Might Be Interested In:


Leave a Reply