ConfimDialogJsJs 1.0.0

Reusable Confirm Dialog Component

A lightweight and modern reusable confirm dialog modal built with vanilla JavaScript and CSS. Perfect for use in any web project needing a clean and customizable confirmation popup — no dependencies required.

📦 Features

• ✅ Zero dependencies (pure JS & CSS)
• 🎨 Beautiful modern design
• ⚙️ Fully customizable buttons, title, message, and behavior
• 🧱 Easy integration with any web page
• 🧍 Responsive and mobile-friendly
• 🚨 Optional danger styling for destructive actions
• ♿ Focus trapping and keyboard accessibility

🚀 Demo

View Live Demo ← (optional)

📁 Installation

Option 1: Include in HTML

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

Option 2: Install via NPM

Coming soon on NPM!

npm install ConfirmDialogJs

Or if publishing to NuGet (for Blazor or ASP.NET use):

dotnet add package ConfirmDialogJs

🛠️ Usage

HTML Button (for triggering the dialog)

<button onclick="showBasicConfirm()">Delete</button>

JavaScript

const confirmDialog = new ConfirmDialog();

function showBasicConfirm() {
    confirmDialog.show({
        title: 'Confirm Action',
        message: 'Are you sure you want to continue?',
        confirmText: 'Yes',
        cancelText: 'No',
        danger: false,
        onConfirm: () => alert('User confirmed'),
        onCancel: () => alert('User cancelled'),
    });
}

📚 API

🎨 Styling

You can override the CSS in confirm-modal.css to match your own design system. The dialog uses utility classes and responsive behavior.

🌍 Localization

You can easily pass localized strings into title, message, confirmText, and cancelText.

💡 Ideas for Enhancement

• Add keyboard ESC to close
• Add auto-focus support
• Add default prompt before navigating away

🤝 Contributing

Pull requests are welcome! For major changes, please open an issue first.

📜 License

MIT

🇮🇷 راهنمای فارسی

این پروژه یک کامپوننت تایید (Confirm Dialog) سبک، زیبا و قابل استفاده مجدد است که بدون هیچ وابستگی خارجی با جاوااسکریپت و CSS نوشته شده است. مناسب برای هر پروژه وبی که نیاز به یک مودال تاییدی ساده و قابل تنظیم دارد.

📦 امکانات

• ✅ بدون نیاز به هیچ کتابخانه اضافی (جاوااسکریپت و CSS خالص)
• 🎨 طراحی مدرن و زیبا
• ⚙️ قابل تنظیم: متن دکمه‌ها، عنوان، پیام و عملکردها
• 🧱 ادغام آسان با هر صفحه وب
• 📱 کاملاً ریسپانسیو و مناسب موبایل
• 🚨 پشتیبانی از حالت خطر (مثلاً حذف)
• ♿ قابلیت دسترسی با کیبورد

🛠️ نحوه استفاده

مرحله 1: افزودن فایل‌ها

<link rel="stylesheet" href="confirm-modal.css">
<script src="confirm-modal.js"></script>

مرحله 2: تعریف دکمه و فراخوانی

<button onclick="showConfirmDialog()">نمایش تاییدیه</button>

<script>
    const confirmDialog = new ConfirmDialog();

    function showConfirmDialog() {
        confirmDialog.show({
            title: 'حذف آیتم',
            message: 'آیا مطمئن هستید که می‌خواهید این آیتم را حذف کنید؟',
            confirmText: 'بله، حذف کن',
            cancelText: 'لغو',
            danger: true,
            onConfirm: () => alert('آیتم حذف شد'),
            onCancel: () => alert('عملیات لغو شد')
        });
    }
</script>

⚙️ تنظیمات قابل استفاده

✅ مجوز

این پروژه تحت لایسنس MIT منتشر شده و برای استفاده تجاری و شخصی آزاد است.

🧑‍💻 مشارکت

در صورت تمایل به مشارکت، لطفاً ابتدا یک issue ایجاد کرده یا درخواست pull request ارسال کنید.