ساخت پاپ آپ مودال با جاوا اسکریپت
مودال (پاپ آپ) یکسری نوتفیکیشن یا صفحاتی هستد که در مرورگرها باز میشوند، این پنل ها به صورت پیش فرض در جاوا اسکریپت نیز وجود دارند اما، نسخه های شخصی سازی شده آن ها همیشه بهتر است. امروز با کدهای آماده یک پروژه ساخت پاپ آپ مودال با جاوا اسکریپت و html ، CSS در خدمت شما هستیم.
ساخت پاپ آپ مودال با جاوا اسکریپت و html و CSS
برای ساخت این پروزه ، نیاز به سه فایل داریم. همچنین شما می توانید پروژه آماده را در بخش انتهای مطلب بصورت مستقیم از لرن پارسی دانلود کنید.
خروجی بصورت ویدیوی زیر خواهد بود :
ابتدا در فایل Html خود، کدهای زیر را وارد می کنیم. و صفحه را با اسم index.htm ذخیره می کنیم.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=s, initial-scale=1.0"> <link rel="stylesheet" href="scripts/style.css"> <title>مودال</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@600&family=Noto+Sans+Arabic:wght@100;400;800&display=swap" rel="stylesheet"> </head> <body> <button id = "display-modal-box">نمایش مودال</button> <div class="modal-container" style="display:none;"> <div class="modal-box"> <svg id = "close_button" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> </svg> <img src="files/icons8-gift.gif" alt=""> <span>متن تست</span> <p> این یک متن تست است خیلی به آن دقت نکنید این یک متن تست است خیلی به آن دقت نکنید این یک متن تست است خیلی به آن دقت نکنید این یک متن تست است خیلی به آن دقت نکنید </p> </div> </div> </body> </html> <script src="scripts/apps.js"></script>
در صفحه ما فعلا یک دکمه را مشاهده خواهید کرد.
حالا نوبت به استایل دهی با فایل CSS خارجی می رسد. کدهای زیر را در فایل Style.Css خود ذخیره خواهیم کرد.
body{ background-image: url(../files/Jungle-Rot.jpg); background-position: center; background-size: cover; background-attachment: fixed; margin: 0; padding: 0; min-height: 100vh; display: flex; flex-direction: row; justify-content: center; place-items: center;} #display-modal-box{ position: relative; width: max-content; height: max-content; padding: 10px 40px; font-family: 'Noto Sans Arabic', sans-serif; font-weight: 900; background-color: orangered; color:white; border: none; border-radius: 7px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.75); } .modal-container{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.329); backdrop-filter: blur(10px); display: flex; flex-direction: row; justify-content: center; place-items: center; } .modal-box{ position: relative; width: 450px; min-height: 300px; background-color: white; display: flex; flex-direction: column; place-items: center; justify-content: center; animation: display-modal 1s 1 forwards; transition: 1000ms; } .modal-box img{ width: 120px; image-rendering:pixelated; user-select: none; } .modal-box span{ font-family: 'Noto Sans Arabic', sans-serif; font-weight: 800; font-size: 26px; color:rgb(22, 33, 53); user-select: none; } .modal-box p{ font-family: 'Noto Sans Arabic', sans-serif; font-weight: 400; text-align: center; font-size: 17px; width: 80%; user-select: none; color:rgb(74, 89, 119); } #close_button{ position: absolute; top: 5px; right: 5px; width: 30px; } @keyframes display-modal { from{ bottom: -400px; opacity: 0; filter: blur(7px); } to{ bottom: 0; opacity: 1; filter: blur(0px); } } @keyframes fade { from{ bottom: 0; opacity: 1; filter: blur(0px); } to{ bottom: -400px; opacity: 0; filter: blur(7px); } }
حالا صفحه ما شکل و ظاهر جذاب تری به خود گرفته است. هم اکنون نیاز به اجرای کدهای جاوا اسکریپت داریم.
در فایل apps.JS خود کدهای زیر را قرار خواهیم داد.
var display_button = document.querySelector("#display-modal-box"); var modal_container = document.querySelector(".modal-container"); isEnable = false; display_button.addEventListener('click', function(){ model_generator("هدیه ات رو بگیر", "هدیه نوروزی خودت را از وبسایت پارس آکادمی دریافت کن بدون هیچگونه پرداختی کاملا رایگان") }) function model_generator(subject, text){ if (isEnable == false){ document.querySelector(".modal-box span").innerHTML = subject; document.querySelector(".modal-box p").innerHTML = text; isEnable = true; modal_container.style.display = "flex"; } } var close_modal = document.querySelector("#close_button") var modal = document.querySelector(".modal-box"); close_modal.addEventListener('click', function(){ if (isEnable == true){ modal.style.animation = "fade 1s 1 forwards"; isEnable = false; setTimeout(function(){ modal.style.animation = "display-modal 1s 1 forwards"; modal_container.style.display = "none"; }, ۱۲۰۰) } })
تمام. با استفاده از کدهای بالا می توانیم یک مودال پاپ آپ جذاب برای سایت یا صفحه وب خود ایجاد کنیم. که با کلیک بر روی یک دکمه قابل اجرا می باشد.
امیدواریم این مقاله برای شما مفید قرار گرفته شده باشد. لینک دانلود کامل این پروژه از لینک گیت هاب آن قابل دسترس است.
دیدگاه ها