Akshay

Posted on May 29

KAlert.js v2.0.0 — Modern JavaScript Alert Dialog Library with WebView Support

#javascript #webdev #opensource #html

I recently upgraded KAlert.js to v2.0.0.

This is a major update that brings modern alert dialogs, confirm dialogs, prompt dialogs, progress dialogs, image dialogs, and WebView iframe dialogs to JavaScript projects.

KAlert.js is now aligned with the same direction as:

KAlertDialog for native Android Java
KAlertFlutter for Flutter / Dart
KAlert.js for Web / JavaScript

The goal is to provide a clean and modern dialog experience across Android, Flutter, and Web.

What is KAlert.js?

KAlert.js is a lightweight, modern, animated alert dialog library for JavaScript projects.

It works directly through CDN and does not require any build setup.

You can use it in:

Static websites
Landing pages
Web apps
Admin dashboards
Portfolio sites
JavaScript projects
Form flows
Confirmation flows

Why not use default browser alerts?

Default browser dialogs work, but they are very limited.

alert("Saved successfully!");

Problems with default dialogs:

They look outdated
They are not customizable
They do not match your website UI
They block the browser
They cannot show rich content
They cannot show loading states
They cannot show images or WebView content

KAlert.js gives you a modern alternative.

Install via CDN

<script src="https://cdn.jsdelivr.net/gh/TutorialsAndroid/KAlert@v2.0.0/kalertdialog.js"></script>

That’s it.

No npm.

No bundler.

No extra setup.

Success Dialog

KAlert.success({
  title: "Success",
  message: "Operation completed successfully.",
  confirmText: "OK"
});

Error Dialog

KAlert.error({
  title: "Error",
  message: "Something went wrong. Please try again.",
  confirmText: "Try Again"
});

Confirm Dialog

KAlert.js uses promise-based APIs.

KAlert.confirm({
  title: "Delete this file?",
  message: "This action cannot be undone.",
  confirmText: "Delete",
  cancelText: "Cancel"
}).then((result) => {
  if (result) {
    console.log("User confirmed");
  } else {
    console.log("User cancelled");
  }
});

Prompt Dialog

KAlert.prompt({
  title: "Enter your name",
  message: "Please enter your name to continue.",
  placeholder: "Type here...",
  confirmText: "Submit",
  cancelText: "Cancel"
}).then((value) => {
  if (value) {
    KAlert.success({
      title: "Hello!",
      message: value
    });
  }
});

Prompt with Validation

KAlert.prompt({
  title: "Create Project",
  message: "Project name must be at least 3 characters.",
  placeholder: "Project name",
  validator: (value) => {
    if (value.trim().length < 3) {
      return "Please enter at least 3 characters.";
    }

    return null;
  }
}).then((value) => {
  if (value) {
    console.log("Project created:", value);
  }
});

Progress Dialog

const loader = KAlert.progress({
  title: "Processing",
  message: "Please wait..."
});

Useful for:

File uploads
API calls
Form submissions
Payment processing
Report generation
Background actions

Image Dialog

KAlert.image({
  title: "Preview",
  message: "Image loaded successfully.",
  imageUrl: "https://example.com/image.png",
  imageType: "big",
  confirmText: "Close"
});

WebView Dialog Support

The biggest update in v2.0.0 is WebView iframe dialog support.

KAlert.webView({
  title: "Terms & Privacy Policy",
  message: "Please read before continuing.",
  url: "https://example.com/privacy-policy",
  webViewHeight: 420,
  confirmText: "I Agree",
  cancelText: "Cancel"
}).then((accepted) => {
  if (accepted) {
    console.log("Accepted");
  }
});

You can use it for:

Terms and Conditions
Privacy Policy
Refund Policy
Help pages
FAQ pages
Documentation
Hosted HTML content

Important WebView Note

KAlert.js WebView dialogs use an iframe.

Some websites block iframe embedding using:

X-Frame-Options
Content-Security-Policy

For best results, use your own hosted Terms, Privacy Policy, Help, or FAQ page.

Example:

KAlert.webView({
  title: "Privacy Policy",
  url: "/privacy-policy.html",
  webViewHeight: 420,
  confirmText: "I Agree"
});

What is New in v2.0.0?

Added KAlert.success()
Added KAlert.error()
Added KAlert.warning()
Added KAlert.info()
Added KAlert.question()
Added KAlert.confirm()
Added KAlert.prompt()
Added KAlert.progress()
Added KAlert.image()
Added KAlert.webView()
Added KAlert.modal()
Added WebView iframe dialog support
Added Terms and Privacy Policy dialog support
Added image dialog support
Added progress/loading dialog support
Added prompt validation support
Added dark mode option
Added style presets
Added callback APIs
Added better mobile responsiveness
Added updated README and landing page
Added new v2.0.0 banner

KAlert Ecosystem

KAlert.js is now part of the same direction as my Android and Flutter dialog libraries.

KAlertDialog

Native Android Java dialog library.

https://github.com/TutorialsAndroid/KAlertDialog

KAlertFlutter

Flutter dialog package.

https://github.com/TutorialsAndroid/KAlertFlutter

pub.dev:

https://pub.dev/packages/kalertflutter

KAlert.js

Web / JavaScript dialog library.

https://github.com/TutorialsAndroid/KAlert

API Comparison

Android Java:

new KAlertDialog(this, KAlertDialog.WEB_VIEW_TYPE, true)
        .setTitleText("Terms & Privacy Policy")
        .setWebViewUrl("https://example.com/privacy-policy")
        .setConfirmClickListener("I Agree", dialog -> dialog.dismissWithAnimation())
        .show();

Flutter:

final result = await KAlertDialog.webView(
  context: context,
  title: 'Terms & Privacy Policy',
  url: 'https://example.com/privacy-policy',
  confirmText: 'I Agree',
);

JavaScript:

KAlert.webView({
  title: "Terms & Privacy Policy",
  url: "https://example.com/privacy-policy",
  confirmText: "I Agree"
});

Different platforms.

Same idea.

Clean APIs and modern dialogs.

Final Thoughts

KAlert.js v2.0.0 is a big update.

It now supports modern alerts, confirm dialogs, prompt dialogs, progress dialogs, image dialogs, and WebView iframe dialogs.

It also improves the UI, mobile responsiveness, documentation, and developer experience.

If you are building websites or JavaScript projects and want a lightweight modern dialog library, try KAlert.js.

If it helps you, please star the repository and share it with other developers.

Useful Links

KAlert.js GitHub
https://github.com/TutorialsAndroid/KAlert

KAlertDialog for Android Java
https://github.com/TutorialsAndroid/KAlertDialog

KAlertFlutter for Flutter
https://github.com/TutorialsAndroid/KAlertFlutter

KAlertFlutter on pub.dev
https://pub.dev/packages/kalertflutter

Sponsor
https://github.com/sponsors/TutorialsAndroid

DEV Community