ساخت popup و نوتیفیکیشن های (موفق,خطا,هشدار) در جاوا اسکریپت

ساخت popup و نوتیفیکیشن های (موفق,خطا,هشدار) در جاوا اسکریپت

ساخت popup و نوتیفیکیشن جاوا اسکریپت – با کمک کتابخانه cute alert می توانیم علاوه بر پاپ آپ ، نوتیفیکیشن هم اضافه کنیم ، امکان شخصی سازی هر دو وجود دارد .

به طور کلی 5 حالت اصلی یعنی success , error , warning , info , question را دارد .

صفحه اصلی HTML پاپ آپ و نوتیفیکیشن

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>Rapidcode.iR - سورس کد</title>
    <link rel="stylesheet" href="static/css/lib/style.css">
    <link rel="stylesheet" href="static/css/main.css">
    <script src="static/js/lib/cute-alert.js"></script>
</head>
<body>


    <div class="container">
        <a id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a>

        <h2>دیالوگ باکس</h2>

        <button id="success">موفق</button>
        <button id="error">خطا</button>
        <button id="warning">هشدار</button>
        <button id="info">اطلاعات</button>
        <button id="question">سوالی</button>

        <hr>

        <h2>نوتیفیکیشن</h2>

        <button id="ts-success">موفق</button>
        <button id="ts-error">خطا</button>
        <button id="ts-warning">هشدار</button>
        <button id="ts-info">اطلاعات</button>


       
    </div>



    
    <script src="static/js/app.js"></script>
</body>
</html>


فایل app.js برای تنظیم کتابخانه

// دیالوگ باکس ها

const success = document.getElementById("success");
const error = document.getElementById("error");
const warning = document.getElementById("warning");
const info = document.getElementById("info");
const question = document.getElementById("question");

success.addEventListener("click", () => {
    cuteAlert({
        type: "success",
        title: "موفقیت آمیز",
        message: "این یک پیغام موفقیت آمیز است",
        buttonText: "باشه",
        closeStyle: "circle"
    })
});

error.addEventListener("click", () => {
    cuteAlert({
        type: "error",
        title: "خطا",
        message: "این یک پیغام خطا است",
        buttonText: "باشه",
        closeStyle: "circle"
    })
});

warning.addEventListener("click", () => {
    cuteAlert({
        type: "warning",
        title: "هشدار",
        message: "این یک پیغام هشدار است",
        buttonText: "باشه",
        closeStyle: "circle"
    })
});

info.addEventListener("click", () => {
    cuteAlert({
        type: "info",
        title: "اطلاعات",
        message: "این یک پیغام اطلاعات است",
        buttonText: "باشه",
        closeStyle: "circle"
    })
});

question.addEventListener("click", () => {
    cuteAlert({
        type: "question",
        title: "سوالی",
        message: "این یک پیغام سوالی است",
        confirmText: "حله",
        cancelText: "لغو",
        closeStyle: "circle"
    }).then((e) => {
        if (e == "confirm") alert("تایید شد");
        else alert("لغو شد")
    });
});


// نوتیفیکیشن ها

const ts_success = document.getElementById("ts-success");
const ts_error = document.getElementById("ts-error");
const ts_warning = document.getElementById("ts-warning");
const ts_info = document.getElementById("ts-info");

ts_success.addEventListener("click", () => {
    cuteToast({
        type: "success",
        message: "این یک نوتیفیکیشن موفقیت آمیز است",
        timer: "4500"
    })
});

ts_error.addEventListener("click", () => {
    cuteToast({
        type: "error",
        message: "این یک نوتیفیکیشن خطا است",
        timer: "4500"
    })
});

ts_warning.addEventListener("click", () => {
    cuteToast({
        type: "warning",
        message: "این یک نوتیفیکیشن هشدار است",
        timer: "4500"
    })
});

ts_info.addEventListener("click", () => {
    cuteToast({
        type: "info",
        message: "این یک نوتیفیکیشن اطلاعات است",
        timer: "4500"
    })
});


type: نوع پاپ آپ یا نوتیفیکیشن
title: عنوان
message: پیغام
buttonText: نوشته دکمه
closeStyle: شکل دکمه خروج
timer : زمان نمایش نوتیفیکیشن به میلی ثانیه

خروجی برنامه

ساخت popup و نوتیفیکیشن جاوا اسکریپت

دانلود برنامه پاپ آپ و نوتیفیکیشن وب

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید .

contact us