magicfile icon وبسایت فایل سحرآمیز - magicfile.ir

تگ های موضوع پاپ آپ زیبای و

پاپ آپ زیبای CSS و jQuery


پاپ آپ‌ها یکی از عناصر جذاب و کاربرپسند در طراحی وب هستند. آن‌ها می‌توانند اطلاعات مهمی را به کاربران ارائه دهند، بدون اینکه صفحه را ترک کنند. در اینجا، به بررسی نحوه ایجاد یک پاپ آپ زیبا با استفاده از CSS و jQuery می‌پردازیم.
ابتدا، باید یک HTML ساده بسازیم. این شامل یک دکمه برای باز کردن پاپ آپ و یک بخش پاپ آپ است که به طور پیش‌فرض پنهان است.
```html
<button id="open-popup">باز کردن پاپ آپ</button>
<div id="popup" class="popup">
<div class="popup-content">
<span class="close">&times;</span>
<h2>عنوان پاپ آپ</h2>
<p>این یک پاپ آپ زیبا است!</p>
</div>
</div>
```
حال به CSS می‌پردازیم. برای طراحی پاپ آپ، می‌توان از خصوصیات مختلف CSS استفاده کرد.
```css
.popup {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0,
  1. 5);
}
.popup-content {
position: relative;
margin: 15% auto;
padding: 20px;
width: 80%;
background-color: white;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0,
  1. 5);
}
.close {
color: red;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
```
در نهایت، به jQuery می‌پردازیم. با استفاده از jQuery، می‌توانیم رفتار پاپ آپ را کنترل کنیم.
```javascript
$(document).ready(function() {
$("#open-popup").click(function() {
$("#popup").fadeIn();
});
$(".close").click(function() {
$("#popup").fadeOut();
});
$(window).click(function(event) {
if ($(event.target).is("#popup")) {
$("#popup").fadeOut();
}
});
});
```
با این کدها، یک پاپ آپ زیبا و کاربردی خواهید داشت. کاربران به راحتی می‌توانند با کلیک بر روی دکمه، پاپ آپ را مشاهده کنند و با کلیک بر روی دکمه بستن یا در هر نقطه خارج از پاپ آپ، آن را ببندند.
در نهایت، می‌توانید با اضافه کردن انیمیشن‌ها و تغییرات دیگر، پاپ آپ خود را شخصی‌سازی کنید. این روش، تجربه کاربری بهتری را برای کاربران شما به ارمغان می‌آورد.
مشاهده بيشتر

لیست فایل های ویژه وبسایت

بهترین-سرویس-پوش-نوتیفیکیشن-(Web-Push-Notification)-اسکریپت-مدیریت-اعلان-و-ساخت-پوش-نوتیفیکیشن-سایت-و-ارسال-پوش-از-طریق-php

بهترین سرویس پوش نوتیفیکیشن (Web Push Notification) اسکریپت مدیریت اعلان و ساخت پوش نوتیفیکیشن سایت و ارسال پوش از طریق php


نرم-افزار-تغییر-زبان-سورس-کد-ویژوال-استودیو-(عناصر-دیزاین-طراحی-فرم-ها)

نرم افزار تغییر زبان سورس کد ویژوال استودیو (عناصر دیزاین طراحی فرم ها)


دانلود-دیتابیس-تقویم-1404-در-اکسل

دانلود دیتابیس تقویم 1404 در اکسل


نرم-افزار-ترجمه-خودکار-فایل-های-po-,-pot-بصورت-کامل-برای-تمامی-زبان-ها-از-جمله-فارسی

نرم افزار ترجمه خودکار فایل های po , pot بصورت کامل برای تمامی زبان ها از جمله فارسی


دانلود-نرم-افزار-تبدیل-txt-به-vcf-:-برنامه-تبدیل-فایل-متنی-تکست-txt-به-وی‌سی‌اف-vcf-(Virtual-Contact-File-مخاطب-موبایل)

دانلود نرم افزار تبدیل txt به vcf : برنامه تبدیل فایل متنی تکست txt به وی‌سی‌اف vcf (Virtual Contact File مخاطب موبایل)


تعداد فایل های دانلود شده

38820+

آخرین بروز رسانی در سایت

1404/4/9

قدمت سایت فایل سحرآمیز

+8 سال

تعداد محصولات برای دانلود

2649+