نمایش محتوا در ویندوزهای مدال برای مشاهده عملکرد افزونه در صفحه نمایشی، روی پیوند: فرم ثبت نام یا محتوای اصلی کلیک کنید.
3. پلاگین جی کوئری “ToastMessage”پیام های پاپ آپ این افزونه در دو نسخه ارائه می شود. در یک مورد، پیام ها پس از مدت زمان مشخصی خود به خود ناپدید می شوند، در اجرای دوم، برای بستن یک پیام، باید روی یک دکمه کلیک کنید.
4. محتوایی که در یک پنجره مودال ظاهر می شودپلاگین "آشکار". برای مشاهده عملکرد افزونه، روی دکمه Fire A Reveal Modal در صفحه نمایشی کلیک کنید.
5. جعبه های گفتگوی زیباروی ضربدر در صفحه نمایشی کلیک کنید تا افزونه را در عمل ببینید.
6. پنجره مودال Mootools، پلاگین "MooDialog" 7. پانل پاپ آپ جی کوئری در بالای صفحه 8. پنجره بازشو jQueryپلاگین جی کوئری برای نمایش فرم بازخورددر یک پنجره بازشو
10. پلاگین MooTools "LightFace" برای پیاده سازی جعبه های گفتگوی فیس بوککادرهای گفتگوی سبک فیس بوک. علاوه بر اطلاعات ثابت، می توانید تصاویر، فریم ها، درخواست های آژاکس. تنظیمات زیادی برای نحوه عملکرد افزونه، ابزار بسیار قدرتمندی است. بسیار شیک و کاربردی به نظر می رسد. برای مشاهده نمونه هایی با محتوای مختلف، لینک های موجود در صفحه نمایشی را دنبال کنید.
11. پنجره مودال جی کوئرییک پنجره بازشو مرتب در jQuery.
12. ویندوزهای مدال جی کوئریپنجره های مودال پاپ آپ زیبا. سه سبک. صفحه نمایشی شامل 3 پیوند برای باز کردن پنجره ها است.
13. ویندوزهای مودال جی کوئریپنجره های مودال پاپ آپ از چندین نوع. برای مشاهده عملکرد افزونه، روی لینک موجود در صفحه نمایشی کلیک کنید.
15. پیامی که در بالای صفحه ظاهر می شودپیام در بالای صفحه نمایش داده می شود که به نوبه خود کم نور می شود. برای مشاهده یک پیام پاپ آپ، روی "Click me" در صفحه نمایشی کلیک کنید. با کلیک بر روی ضربدر، آن بسته می شود. با استفاده از jQuery پیاده سازی شده است.
16. پنجره مودال "ModalBox" در جاوا اسکریپتبدون استفاده از پاپ آپ ها و بارگذاری مجدد صفحه، دیالوگ های مدال مدرن را پیاده سازی کنید. در صفحه نمایشی، روی دکمه "شروع نسخه نمایشی" کلیک کنید تا اسکریپت را در عمل ببینید.
17. افزونه “Leightbox” با استفاده از کتابخانه Prototypeپلاگین برای نمایش محتوا در ویندوز مودال.
در حالی که در مورد تکنیک های مختلف ساخت وب سایت صحبت می کنیم، مضحک است که در مورد برخی از روش های ایجاد پنجره های مدال صحبت نکنیم. ما در مورد هدف، سودمندی و مشکلات در حال ظهور استفاده از پنجره های پاپ آپ و مدال صحبت نمی کنیم. بیایید تنها به یکی از نمونه های متعدد ایجاد چنین پنجره هایی نگاه کنیم.
شرایطی وجود دارد که امکان استفاده از افزونه های خاص مانند و وجود ندارد، بنابراین ارزش درک این را دارد که چگونه می توانید پلاگین خود را ایجاد کنید.
بیایید ببینیم چگونه این کار را انجام دهیم:
HTMLبیایید با اضافه کردن برچسب هایی با ویژگی های زیر شروع کنیم:
- href - #?w=500 عرض پنجره را نشان می دهد
- rel - ویژگی منحصر به فرد برای هر پنجره
- class="poplight" - کلاس برای نمایش یک پنجره بازشو
| < a href= "#?w=500" rel= "popup_name" class = "poplight" >پنجره در عمل را ببینید - عرض = 500 پیکسل |
پنجره در عمل را ببینید - عرض = 500 پیکسل
در مرحله بعد باید نشانه گذاری درون خطی برای پاپ آپ ایجاد کنیم. می توانید آن را در هر نقطه از صفحه قرار دهید، به عنوان مثال در پایین محتوا. توجه داشته باشید که شناسه بازشو با ویژگی rel تگ مطابقت دارد
این پیوند و پنجره بازشو را به هم پیوند می دهد.
سرفصل
هر متنی که بخواهید
و بنابراین، ما محل قرارگیری پنجره خود را در صفحه مشخص کرده‌ایم، حالا بیایید آن را با استفاده از سبک‌ها تزئین کنیم، به اصطلاح ظاهر مناسبی به آن بدهیم.
برای وضوح بیشتر، من برخی از توضیحات را برای پارامترهای سبک پنجره خود یادداشت کرده ام. از آنجایی که پاپ آپ ها می توانند داشته باشند اندازه های مختلف, ما لبه های پنجره را در popup_block CSS مشخص نمی کنیم.
| #fade (نمایش: هیچ ؛ /* -- پیش فرضپنهان--*/ پس زمینه: rgba (7، 87، 207، 0.8); |
#fade (نمایش: هیچکدام؛/*--به‌طور پیش‌فرض پنهان می‌شود--*/ پس‌زمینه: rgba(7، 87، 207، 0.8)؛ موقعیت: ثابت؛ سمت چپ: 0؛ بالا: 0؛ عرض: 100٪؛ ارتفاع: 100% کدورت: 0.80. z-index: 9999. 134: font-size: 50%; سایه: 0px 20px #000 -moz-box-shadow: 0px 20px #000 -radius: 12px; padding: 0. color: font-weight: 400 text-align : text-shadow: 1px 2px #0D0C0C ) /* از دکمه بستن */ . ;
حاشیه: 2px جامد #ccc; ارتفاع: 25 پیکسل؛ارتفاع خط: 20 پیکسل؛ موقعیت: مطلق;سمت راست: -17 پیکسل؛ فونت-وزن: پررنگ; text-align: center;
متن-تزیین: هیچکدام؛ بالشتک: 0;بالا: -17 پیکسل.
عرض: 25 پیکسل؛ -webkit-border-radius: 50%؛ JQuery از وب سایت کتابخانه، یا از یک فایل جداگانه واقع در اعماق Google استفاده کنید و آن را به سند وصل کنید، در قسمت قبل از برچسب بسته شدن، خط زیر را قرار دهید:
در مرحله بعدی به پر کردن و توابع نگاه خواهیم کرد پلاگین جی کوئری، برای فعال کردن پاپ آپ ما، کد حاوی توضیحاتی برای درک بهتر کاری است که انجام می دهیم.
))؛
//پنجره را ببندید و پس‌زمینه را محو کنید $(document).on("click", "a.close, #fade", function() (//close با کلیک کردن در خارج از پنجره، یعنی روی پس‌زمینه... $( "#fade , .popup_block").fadeOut(function() ($("#fade, a.close").remove(); //fade out smoothly )); ))؛
نتیجه گیری:
به طور کلی، اگر وارد علف‌های هرز نشوید و خود را با کدهای غیرضروری تحت فشار نگذارید، پنجره مودال فوق‌العاده ما آماده کار است و منتظر نظرات شما به صورت متن یا هر اطلاعات مفید دیگری است.
برای کسانی که مایلند از یک پنجره مودال برای قرار دادن فیلم ها یا تصاویر در مقیاس بزرگ در آن استفاده کنند، من همچنان توصیه می کنم از افزونه های خاصی مانند . در صورت تمایل مشکلی نیست.
دفعه بعد حتماً به شما می گویم و با یک مثال به شما نشان می دهم و مطمئناً بسیاری علاقه مند خواهند شد که در مورد سایر اشیاء شخص ثالث در پنجره پاپ آپ یاد بگیرند. پس در وب گم نشوید و با ما همراه باشید!
به روز رسانی: نسخه dm-modal.js نسخه 1.3 (2017/01/15)
اغلب می‌توانید پنجره‌های مدال را در وب‌سایت‌ها پیدا کنید، و همه آنها برای کارهای مختلف استفاده می‌شوند. در واقع، این یک ابزار کاملا قدرتمند است که به شما امکان می دهد رابط سایت را تعاملی تر و راحت تر کنید. به عنوان مثال، پنجره های مدال را می توان برای اشکال مختلف استفاده کرد، مانند فرم مجوز، فرم بازخورد، ثبت سفارش برای یک محصول، و شما هرگز نمی دانید.
در این پست به مثالی از نحوه ساخت یک پنجره مودال ساده با استفاده از JQuery و CSS خواهیم پرداخت. ویژگی این مثال این است که به استثنای خود کتابخانه JQuery نیازی به آن نیست.
کد پنجره مودال را در صفحه قرار دهید:
بستن پنجره مودال باز
همانطور که از نشانه گذاری می بینید، بلوک پنجره modal خود یک div با ویژگی id= است modal_formکه حاوی یک عنصر span با id= است modal_close. این عنصر به عنوان دکمه ای برای بستن پنجره مدال عمل می کند، علاوه بر این، در زیر بلوک یک بلوک div با ویژگی id= وجود دارد. پوشش، که برای تیره کردن پس زمینه نیز کاربرد دارد. پنجره مودال با پیوند، با کلاس باز می شود معین.
CSS برای پنجره مودال
#form_modal ( عرض: 300px؛ ارتفاع: 300px؛ حاشیه: 5px؛ حاشیه: 3px #000 جامد؛ پس‌زمینه: #fff؛ موقعیت: ثابت؛ بالا: 45%؛ سمت چپ: 50%؛ حاشیه بالا: -150px. حاشیه سمت چپ: -150 پیکسل; کدورت: 0; همپوشانی (z-index:3؛ موقعیت: ثابت؛ پس‌زمینه رنگ:#000؛ کدورت: 0.8؛ -moz-opacity: 0.8؛ فیلتر:آلفا(تاری=80)؛ عرض:100%؛ بالا:0؛ مکان‌نما: هیچ کدام)
برای modal_formما یک عرض و ارتفاع ثابت تنظیم کردیم و سپس موقعیت را در مرکز صفحه قرار دادیم. برای پس زمینه پنجره مودال ( پوشش) اندازه را متناسب با عرض صفحه تنظیم می کنیم، با شفافیت پر می کنیم و همچنین به طور پیش فرض آن را پنهان می کنیم. لحظه خاص با z-indexمودال باید بزرگ‌ترین عنصر روی صفحه را داشته باشد و جلد باید بزرگ‌ترین عنصر را به جز خود مدال داشته باشد.
اکنون به اساسی ترین چیز، این کد جاوا اسکریپت است. دو رویداد اصلی برای پنجره مدال استفاده خواهد شد: باز شدن آن - کلیک کردن بر روی یک عنصر با کلاس معین، در مورد ما این یک پیوند است و بستن پنجره مدال یک کلیک روی جلد است ( پوشش)، یا روی دکمه بستن کلیک کنید، در مورد ما این یک عنصر span با id= است modal_close.
$(document).ready(function() ($(.modal). تابع پوشش ()( // در مرحله بعد پنجره مود را نشان می دهد $("#modal_form"). ) // بستن پنجره مودال $("#modal_close, #overlay").click("#modal_form") ")، 200، // کاهش تابع شفافیت())( // بعد از انیمیشن $(this).css("display", "none"); // پنهان کردن پنجره $("#overlay").fadeOut (400) ) ;
با استفاده از animate موقعیت عمودی را تغییر می دهیم بالاو همچنین شفافیت کدورت، و با این کار به یک اثر جالب می رسیم. یک اثر مشابه هم هنگام باز کردن پنجره و هم هنگام بستن آن استفاده می شود. تفاوت این است که ترتیب اعمال خصوصیات بر روی بلوک ها تغییر می کند و در نتیجه باز و بسته شدن پنجره را تجسم می کند.
پنجره های مدال بخشی جدایی ناپذیر از طراحی وب مدرن هستند، توسعه دهنده می تواند به روش حلقه زدن در یک صفحه و عدم هدایت بازدیدکننده به صفحات ثانویه متوسل شود. در این آموزش به نحوه ایجاد پنجره های مودال عالی با پس زمینه تار برای وب سایت خود با استفاده از jQuery و CSS3 خواهیم پرداخت. به لطف این قوانین، زمانی که پنجره ظاهر می شود، پس زمینه ای تار ایجاد می کنیم که چشم بازدید کننده را فقط به آن گره می زند. اطلاعات لازمدر وب سایت
پنجره های مدال با پس زمینه تار در CSS3بهترین اخبار اقتصادی فقط اینجاست: دروباخا
انیمیشن پنجره به گونه ای تنظیم می شود که با کلیک بر روی دکمه ظاهر شود، پنجره از بالا به پایین متحرک می شود و تاری پس زمینه به طور خودکار افزایش می یابد.
مرحله 1. HTMLما یک ظرف خواهیم داشت که شامل: عنوان، توضیحات است، سپس یک کلاس برای دکمه با کلاس toggleModal اضافه می کنیم تا پنجره modal باز شود:
سرفصل
توضیحات
عنوان مقاله را برای پنجره باز کنیدهنگام ایجاد یک وب سایت، برگه ها یک چیز بسیار جالب و راحت هستند.
بستنسپس باید کلاس modal is-active را اضافه کنیم، این کلاس مسئول فراخوانی پنجره modal خواهد بود، modal__header مسئول عنوان و استایل پنجره است.
مرحله 2: CSSحالا بیایید به یک ظاهر طراحی بپردازیم، اولین مرحله کلاس دکمه خواهد بود، که همانطور که حدس زدید مسئول دکمه های سایت است، ما پارامترهای نمایش صحیح را برای آن تنظیم می کنیم:
دکمه ( پس‌زمینه: هیچکدام؛ پس‌زمینه کلیپ: padding-box؛ نمایشگر: بلوک درون خطی؛ حاشیه: 0؛ کاربر-انتخاب: هیچ؛ -webkit-touch-callout: هیچ؛ -webkit-appearance: دکمه؛ -webkit-user -انتخاب: هیچ، -moz-user-select: -ms-user-select: هیچ)
ظرف (موقعیت: نسبی؛ حاشیه: 0 خودکار؛ حداکثر عرض: 960 پیکسل؛ اندازه جعبه: جعبه حاشیه؛ بالشتک: 40 پیکسل؛ )
مقاله ( پس‌زمینه: #fff؛ بالشتک: 20 پیکسل؛ حاشیه پایین: 40 پیکسل؛ شعاع حاشیه: 5 پیکسل؛ ) .modal (نمایش: هیچ، موقعیت: ثابت؛ بالا: 50٪؛ عرض: 100٪؛ ارتفاع: خودکار؛ حاشیه -بالا: -150px-رنگ:$color-white: 999px 0px darken($color-bg, 10%); سمت چپ: -260px; حداکثر عرض: 520px) &.is-active (نمایشگر: بلوک؛ انیمیشن: 1s اسلاید خطی؛) darken($color-bg، 5%)سبک ها بسیار ساده هستند، آنها ذخیره می شوند فایل جداگانهو نباید هنگام ویرایش آنها برای توسعه دهنده ای که حداقل یک بار با CSS مواجه شده است، مشکل ایجاد کند.
مرحله 3. JSآخرین، اما نه کمتر مهم ما، تنظیم تاری خودکار پس‌زمینه زمانی که منو ظاهر می‌شود، و همچنین قابلیت کلیک روی پیوندها، قوانین JS کوچک به ما در این امر کمک می‌کنند:
$("body").addClass("is-blurred"); $(".toggleModal").on("کلیک"، تابع (رویداد) ( event.preventDefault(); $(".modal").toggleClass("is-active")؛ $("body").toggleClass ("مایل است")؛
نتیجه پنجره‌های مودال فوق‌العاده‌ای است که چشم بیننده را خشنود می‌کند و طراحی شما را به هم نمی‌ریزد.
3. نمونه ای از یک پنجره مودال جی کوئری که از یک پیوند (از دمو) فراخوانی شده است.
به احتمال زیاد، قبلاً بیش از یک بار یک پنجره مودال پاپ آپ را در اینترنت مشاهده کرده اید - تأیید ثبت نام، هشدار، اطلاعات پس زمینه، دانلود فایل و موارد دیگر. در این آموزش چندین مثال در مورد نحوه ایجاد ساده ترین پنجره های مدال ارائه خواهم داد.
ایجاد یک پنجره مودال پاپ آپ ساده بیایید نگاهی به کد یک پنجره مودال ساده که بلافاصله ظاهر می شود را شروع کنیم.کد جی کوئری
$(document).ready(function()
{
alert("متن در پنجره پاپ آپ");
});
کد را در هر نقطه از بدنه صفحه خود قرار دهید. بلافاصله پس از بارگذاری صفحه، بدون هیچ دستوری، پنجره ای به شکل زیر مشاهده خواهید کرد:
اما کد زیر پس از بارگذاری کل صفحه در مرورگر اجرا می شود. در مثال ما، پس از بارگیری صفحه با تصاویر، یک پنجره پاپ آپ ساده ظاهر می شود:
$(window).load(function()
{
alert ("صفحه بارگیری شده است!)");
});
اغلب می توانید ببینید که فرم های ورود و ثبت نام در چنین پنجره هایی قرار دارند. بیایید دست به کار شویم
ابتدا قسمت html را بنویسیم. ما این کد را در متن سند شما قرار می دهیم.
فراخوانی یک پنجره مودال
متن پنجره معین
بستن
متن در یک پنجره مودال.
کد CSS یا در یک فایل css جداگانه یا در هد.
بدن (
font-family:verdana;
اندازه فونت: 15 پیکسل
}
پیوند. (رنگ:#fff؛ متن-تزیین: هیچ)
.link:hover (color:#fff; text-decoration: underline)
#ماسک (
موقعیت: مطلق;
چپ: 0;
top:0;
z-index:9000;
background-color:#000;
نمایش: هیچ
}
#boxes.window (
موقعیت: مطلق;
چپ: 0;
top:0px;
-بالا: 40 پیکسل؛
عرض: 440 پیکسل
ارتفاع: 200 پیکسل
نمایش: هیچ
z-index:9999;
بالشتک: 20 پیکسل؛
سرریز: پنهان;
}
#جعبه #گفتگو (
عرض: 375 پیکسل
ارتفاع: 203 پیکسل;
padding: 10px;
background-color:#ffffff;
}
بالا(
موقعیت: مطلق;
چپ: 0;
top:0;
عرض: 370 پیکسل
ارتفاع: 30 پیکسل
پس زمینه: #0085cc;
padding: 8px 20px 6px 10px;
}
.بستن(
float:right;
}
.content(
padding-top: 35px;
}
در کد jQuery، ما روی موقعیت پنجره مودال و ماسک تمرکز خواهیم کرد، در مورد ما تیره شدن تدریجی پس زمینه.
توجه! فراموش نکنید که کتابخانه را در سر سند قرار دهید!
اتصال کتابخانه از وب سایت Google. خب، خود کد jQuery.
کد جی کوئری
$(document).ready(function() (
$("a").click(function(e) (
e.preventDefault();
var id = $(this).attr("href");
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$("#mask").css(("width":maskWidth,"height":maskHeight));
$("#mask").fadeIn(1000);
$("#mask").fadeTo("slow",0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css("بالا"، winH/2-$(id).height()/2);
$(id).css("سمت چپ"، winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").click(function (e) (
e.preventDefault();
$("#mask, .window").hide();
});
$("#mask").click(function () (
$(this).hide();
$(".window").hide();
});
});
