1. پنجره Modal در jQuery "Simple Modal Box" 2. پلاگین jQuery "LeanModal"

نمایش محتوا در ویندوزهای مدال برای مشاهده عملکرد افزونه در صفحه نمایشی، روی پیوند: فرم ثبت نام یا محتوای اصلی کلیک کنید.

3. پلاگین جی کوئری “ToastMessage”

پیام های پاپ آپ این افزونه در دو نسخه ارائه می شود. در یک مورد، پیام ها پس از مدت زمان مشخصی خود به خود ناپدید می شوند، در اجرای دوم، برای بستن یک پیام، باید روی یک دکمه کلیک کنید.

4. محتوایی که در یک پنجره مودال ظاهر می شود

پلاگین "افشای". برای مشاهده عملکرد افزونه، روی دکمه Fire A Reveal Modal در صفحه نمایشی کلیک کنید.

5. جعبه های گفتگوی زیبا

روی ضربدر در صفحه نمایشی کلیک کنید تا افزونه را در عمل ببینید.

6. پنجره مودال Mootools، پلاگین "MooDialog" 7. پانل پاپ آپ جی کوئری در بالای صفحه 8. پنجره بازشو jQuery

پلاگین جی کوئری برای نمایش فرم بازخورددر یک پنجره بازشو

10. پلاگین MooTools "LightFace" برای پیاده سازی جعبه های محاوره ایفیس بوک

کادرهای گفتگوی سبک فیس بوک. علاوه بر اطلاعات ثابت، می توانید تصاویر، فریم ها، درخواست های آژاکس. تنظیمات زیادی برای نحوه عملکرد افزونه، ابزار بسیار قدرتمندی است. بسیار شیک و کاربردی به نظر می رسد. برای مشاهده نمونه هایی با محتوای مختلف، لینک های موجود در صفحه نمایشی را دنبال کنید.

11. پنجره مودال جی کوئری

یک پنجره بازشو مرتب در jQuery.

12. ویندوزهای مودال جی کوئری

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

13. jQuery modal windows

پنجره های مودال پاپ آپ از چندین نوع. برای مشاهده عملکرد افزونه، روی لینک موجود در صفحه نمایشی کلیک کنید.

15. پیامی که در بالای صفحه ظاهر می شود

پیام در بالای صفحه نمایش داده می شود که به نوبه خود کم نور می شود. برای مشاهده یک پیام پاپ آپ روی "من کلیک کنید" در صفحه نمایشی کلیک کنید. با کلیک بر روی ضربدر، آن بسته می شود. با استفاده از 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 تگ مطابقت دارد
این پیوند و پنجره بازشو را به هم پیوند می دهد.

سرفصل

هر متنی که بخواهید

و بنابراین، ما محل قرارگیری پنجره خود را در صفحه مشخص کرده‌ایم، حالا بیایید آن را با استفاده از سبک‌ها تزئین کنیم، به اصطلاح ظاهر مناسبی به آن بدهیم.

طرح بندی CSS

برای وضوح بیشتر، من برخی از توضیحات را برای پارامترهای سبک پنجره خود یادداشت کرده ام. از آنجایی که پنجره‌های پاپ‌آپ می‌توانند اندازه‌های مختلفی داشته باشند، لبه‌های پنجره را در CSS popup_block مشخص نمی‌کنیم؛ محاسبه اندازه مورد نیاز دقیقاً وظیفه‌ای است.

#fade (نمایش: هیچ ؛ /* -- پیش فرضپنهان--*/ پس زمینه: rgba (7، 87، 207، 0.8); موقعیت: ثابت؛ سمت چپ: 0; بالا: 0; عرض: 100%؛ ارتفاع: 100%; Opacity: 0.80; z-index: 9999; .popup_block (نمایش: هیچکدام؛ /*--به طور پیش‌فرض پنهان شده--*/ پس‌زمینه: #fff؛ بالشتک: 20 پیکسل؛ حاشیه: 8 پیکسل rgb جامد (134، 134، 134)، شناور: چپ، اندازه قلم: 85 ٪؛ موقعیت: ثابت؛ بالا: 50٪؛ سمت چپ: 50٪؛ رنگ: #000؛ حداکثر عرض: 750 پیکسل؛ حداقل عرض: 320 پیکسل؛ ارتفاع: خودکار؛ شاخص z: 99999؛ /*--سایه بلوک CSS3 --*/ -webkit-box-shadow: 0px 0px 20px #000 ؛ -moz-box-shadow: 0px 0px 20px #000 ; box-shadow : 0px 0px 20px #000 ; /*---CSS3 cornering- / -webkit-border-radius: 12px؛ -moz-border-radius: 12px; border-radius: 12px; ) -height : 1.6 ؛ .popup_block h2 ( حاشیه : 0px 0 10px ؛ رنگ : rgb (43 , 43 , 43 ) ؛ فونت-وزن : 400 ؛ متن-تراز : مرکز ؛ متن-سایه : 1px0/2C * یک دکمه بستن تشکیل دهید */ .close ( background-color : rgba ( 61 , 61 , 61 , 0.8 ) ; حاشیه: 2px جامد #ccc ; ارتفاع: 25 پیکسل؛ ارتفاع خط: 20 پیکسل؛ موقعیت: مطلق; سمت راست: -17 پیکسل؛ فونت-وزن: پررنگ; text-align: center; text-decoration: هیچ; بالشتک: 0; بالا: -17 پیکسل. عرض: 25 پیکسل؛ -webkit-border-radius: 50% ; -moz-border-radius: 50% ; -ms-border-radius: 50% ; -o-border-radius: 50% ; شعاع مرزی: 50% ; -moz-box-shadow: 1px 1px 3px #000 ; -webkit-box-shadow: 1px 1px 3px #000 ; box-shadow : 1px 1px 3px #000 ; بستن بستن box-shadow: 4px 4px 10px #857373; padding: 0 ; ) /*--موقعیت یابی ثابت برای IE6--*/ * html #fade ( موقعیت : مطلق ; ) * html .popup_block ( موقعیت : مطلق ; )

#fade (نمایش: هیچ‌کدام؛/*--به‌طور پیش‌فرض پنهان می‌شود--*/ پس‌زمینه: rgba(7، 87، 207، 0.8)؛ موقعیت: ثابت؛ سمت چپ: 0؛ بالا: 0؛ عرض: 100٪؛ ارتفاع: 100%؛ کدورت: 0.80؛ z-index: 9999؛ .popup_block (نمایش: هیچکدام؛ /*--به طور پیش‌فرض پنهان شده است--*/ پس‌زمینه: #fff؛ بالشتک: 20 پیکسل؛ حاشیه: 8px جامد rgb(134، 134، 134؛ شناور: چپ؛ اندازه قلم: 85 درصد؛ موقعیت: ثابت؛ بالا: 50 درصد؛ سمت چپ: 50 درصد؛ رنگ: #000؛ حداکثر عرض: 750 پیکسل؛ حداقل عرض: 320 پیکسل؛ ارتفاع: خودکار ؛ z-index: 99999؛ /*--CSS3 box shadow--*/ -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000؛ /*--گردش گوشه CSS3--*/ -webkit-border-radius: 12px؛ -moz-border-radius: 12px; border-radius: 12px; ) .popup_block p (وزن فونت: 400; بالشتک: 0؛ حاشیه: 0؛ رنگ: #000؛ ارتفاع خط: 1.6؛). popup_block h2 ( حاشیه: 0px 0 10px؛ رنگ: rgb(43, 43, 43؛ فونت-وزن: 400؛ متن تراز : center; text-shadow: 1px 1px 2px #0D0C0C; ) /* یک دکمه بستن تشکیل دهید */ .close ( پس زمینه رنگ: rgba(61, 61, 61, 0.8); حاشیه: 2px جامد #ccc; ارتفاع: 25 پیکسل؛ ارتفاع خط: 20 پیکسل؛ موقعیت: مطلق; سمت راست: -17 پیکسل؛ فونت-وزن: پررنگ; text-align: center; متن-تزیین: هیچکدام؛ بالشتک: 0; بالا: -17 پیکسل. عرض: 25 پیکسل؛ -webkit-border-radius: 50%؛ -moz-border-radius: 50%; -ms-border-radius: 50%؛ -o-border-radius: 50%; شعاع مرزی: 50%; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; ) بستن box-shadow:4px 4px 10px #857373; padding:0; ) /*--موقعیت یابی ثابت برای IE6--*/ *html #fade ( موقعیت: مطلق؛ ) *html .popup_block ( موقعیت: مطلق؛ )

با تشکیل پنجره و آن ظاهربا با استفاده از css، من فکر می کنم هیچ مشکل خاصی وجود نخواهد داشت. شما می توانید سبک ها را مستقیماً در آن ثبت کنید صفحه HTML، بین تگ ها و یا می توانید آن را در یک فایل جداگانه از سبک های خود قرار دهید، معمولاً این یک فایل style.css یا چیزی شبیه به آن است.

راه اندازی JQuery

برای کار تمام عیارپنجره مودال، باید جی کوئری را متصل کنید، کسانی که با کار این کتابخانه آشنایی ندارند می توانند بخوانند.

خوب، ما ادامه می دهیم. شما می توانید بیشترین کار را انجام دهید آخرین نسخه JQuery از وب سایت کتابخانه، یا از یک فایل جداگانه واقع در اعماق Google استفاده کنید و آن را به سند وصل کنید، در قسمت قبل از برچسب بسته شدن، خط زیر را قرار دهید:

در مرحله بعدی به پر کردن و توابع نگاه خواهیم کرد پلاگین جی کوئری، برای فعال کردن پاپ آپ ما، کد حاوی توضیحاتی برای درک بهتر کاری است که انجام می دهیم.

پلاگین جی کوئری

$ (سند). ready(function () ( //هنگامی که روی پیوندی با کلاس poplight و ویژگی تگ href کلیک می کنید با # $("a.poplight" ) . click(function () ( var popID = $(this) . attr("rel") ; //نام پنجره را دریافت کنید، مهم است که هنگام اضافه کردن موارد جدید فراموش نکنید که نام را در ویژگی rel تغییر دهید. link var popURL = $(this) attr(" href") ; //اندازه را از ویژگی href پیوند //query و متغیرها را از href url var query= popURL دریافت کنید. split ("?" ) ; var dim = query[ 1 ] . split ("&" ) ; var popWidth = dim[ 0 ] . split ("=") [ 1 ] ; //اولین مقدار رشته پرس و جو //افزودن دکمه بستن به پنجره $( "#" + popID). fadeIn(). " + popID) . width() + 80 ) / 2 ; //مقدار تورفتگی $("#" + popID) را تنظیم کنید. ) ؛ //افزودن یک پس‌زمینه تاریک شفاف $("body") . append("" ); ظرف //div قبل از تگ قرار خواهد گرفت. $("#fade") . css(( "filter" : "alpha(opacity=80)") ). fadeIn() ; //شفافیت لایه، فیلتر برای IE احمقانه return false ; )) ؛ //پنجره را ببندید و پس زمینه $(document) را کم نور کنید. on("click" , "a.close, #fade" , function () (//بستن با کلیک در خارج از پنجره، یعنی در پس زمینه... $("#fade , .popup_block" ) . fadeOut(function ( ) ($("#fade, a.close" ) . remove() ; //fades smoothly ) ) ; return false ; ) ) ; )) ؛

$(document).ready(function())( //هنگام کلیک بر روی پیوندی با کلاس poplight و ویژگی تگ href با # $("a.poplight").click(function() ( var popID = $(this).attr("rel"); //نام پنجره را دریافت کنید، مهم است که فراموش نکنید که نام در ویژگی rel پیوند هنگام افزودن موارد جدید var popURL = $(this).attr("href"); //اندازه را از ویژگی href پیوند //query و متغیرها را از پرس و جوی href url var دریافت کنید. = popURL.split("?"); var dim= query.split( "&"); var popWidth = dim.split("="); //اولین مقدار رشته پرس و جو //افزودن دکمه بستن به پنجره $("#" + popID).fadeIn().css(( "width": Number(popWidth) )).prepend(""); //تعیین حاشیه (حاشیه) برای تراز وسط (عمودی و افقی) - 80 را به ارتفاع / عرض اضافه می کنیم، با در نظر گرفتن padding + عرض فریم تعریف شده در css var popMargTop = ($("#" + popID).height() + 80) / 2; var popMargLeft = ($("# " + popID).width() + 80) / 2; //تنظیم مقدار تورفتگی $("# " + popID).css(( "margin-top" : -popMargTop، "margin-left" : -popMargLeft) //افزودن یک پس‌زمینه تاریک شفاف $("body").append("")؛ //div ظرف قبل از برچسب فهرست می‌شود. $("#fade").css(("filter" : "alpha(opacity=80)")).fadeIn(); // شفافیت لایه، فیلتر برای IE احمقانه بازگشت نادرست. ))) //پنجره را ببندید و پس‌زمینه را محو کنید $(document).on("click", "a.close, #fade", function() (//close با کلیک کردن در خارج از پنجره، یعنی روی پس‌زمینه... $( "#fade , .popup_block").fadeOut(function() ($("#fade, a.close").remove(); //fade out )); return false; )); )))

نتیجه:

به طور کلی، اگر وارد علف‌های هرز نشوید و خود را با کدهای غیرضروری تحت فشار نگذارید، پنجره مودال فوق‌العاده ما آماده کار است و منتظر نظرات شما به صورت متن یا هر اطلاعات مفید دیگری است.
برای کسانی که مایلند از یک پنجره مودال برای قرار دادن فیلم ها یا تصاویر در مقیاس بزرگ در آن استفاده کنند، من همچنان توصیه می کنم از افزونه های خاصی مانند . در صورت تمایل مشکلی نیست.

دفعه بعد حتماً به شما می گویم و با یک مثال به شما نشان می دهم و مطمئناً بسیاری علاقه مند خواهند شد که در مورد سایر اشیاء شخص ثالث در پنجره پاپ آپ یاد بگیرند. پس در وب گم نشوید و با ما همراه باشید!

به روز رسانی: نسخه dm-modal.js نسخه 1.3 (2017/01/15)
رفع شد: با استفاده از دستور href*=\\#، تابع منسوخ .live() جایگزین شد. این افزونه اکنون با نسخه های فعلی کتابخانه jQuery کار می کند

همین! امیدوارم این درس مفید دیگری بوده باشد.

با تمام احترام، اندرو

اغلب می‌توانید پنجره‌های مدال را در وب‌سایت‌ها پیدا کنید، و همه آنها برای کارهای مختلف استفاده می‌شوند. در واقع، این یک ابزار کاملا قدرتمند است که به شما امکان می دهد رابط سایت را تعاملی تر و راحت تر کنید. به عنوان مثال، پنجره های مدال را می توان برای اشکال مختلف استفاده کرد، مانند فرم مجوز، فرم بازخورد، ثبت سفارش برای یک محصول، و شما هرگز نمی دانید.

در این پست به مثالی از نحوه ساخت یک پنجره مودال ساده با استفاده از 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: 5؛ بالشتک: 20 پیکسل 10 پیکسل؛ ) #شکل_modal #modal_close (عرض: 21 پیکسل؛ ارتفاع: 21 پیکسل؛ موقعیت: مطلق؛ بالا: 10 پیکسل؛ سمت راست: 10 پیکسل؛ مکان‌نما: اشاره‌گر؛ نمایشگر: بلوک؛ ) #پوشش (z-index:3؛ موقعیت: ثابت؛ پس‌زمینه رنگ: #000؛ کدورت: 0.8؛ -moz-opacity: 0.8؛ فیلتر: آلفا (تعوض=80) ؛ عرض: 100%؛ ارتفاع: 100%؛ بالا: 0؛ چپ: 0؛ مکان نما: اشاره گر؛ نمایشگر: هیچکدام؛ )

برای modal_formما یک عرض و ارتفاع ثابت تنظیم کردیم و سپس موقعیت را در مرکز صفحه قرار دادیم. برای پس زمینه پنجره مودال ( پوشش) اندازه را متناسب با عرض صفحه تنظیم می کنیم، با شفافیت پر می کنیم و همچنین به طور پیش فرض آن را پنهان می کنیم. لحظه خاص با z-indexمودال باید بزرگ‌ترین عنصر روی صفحه را داشته باشد و جلد باید بزرگ‌ترین عنصر را به جز خود مدال داشته باشد.

اکنون به اساسی ترین چیز، این کد جاوا اسکریپت است. دو رویداد اصلی برای پنجره مدال استفاده خواهد شد: باز شدن آن - کلیک کردن بر روی یک عنصر با کلاس معین، در مورد ما این یک پیوند است و بستن پنجره مدال یک کلیک روی جلد است ( پوشش)، یا روی دکمه بستن کلیک کنید، در مورد ما این یک عنصر span با id= است modal_close.

$(document).ready(function() ($(.modal). تابع پوشش ()( // در مرحله بعد پنجره مود را نشان می دهد $("#modal_form"). ))); )))؛ // بستن پنجره مودال $("#modal_close, #overlay").کلیک کنید(function())($("#modal_form") .animate((مادرمانی: 0، بالا: "45% ")، 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 -select: هیچ؛ -moz-user-select: هیچ؛ -ms-user-select: هیچ؛)

ظرف (موقعیت: نسبی؛ حاشیه: 0 خودکار؛ حداکثر عرض: 960 پیکسل؛ اندازه جعبه: جعبه حاشیه؛ بالشتک: 40 پیکسل؛ )

مقاله ( پس‌زمینه: #fff؛ بالشتک: 20 پیکسل؛ حاشیه پایین: 40 پیکسل؛ شعاع حاشیه: 5 پیکسل؛ ) .modal (نمایش: هیچ، موقعیت: ثابت؛ بالا: 50٪؛ عرض: 100٪؛ ارتفاع: خودکار؛ حاشیه -بالا: -150 پیکسل؛ رنگ پس‌زمینه: $رنگ-سفید؛ حاشیه-شعاع: 3px؛ z-index: 999؛ box-shadow: 0px 1px 3px 0px darken($color-bg, 10%)؛ @media #( $small) ( چپ: 50%؛ حاشیه-چپ: -260 پیکسل؛ حداکثر عرض: 520 پیکسل؛ ) &.is-active (نمایش: بلوک؛ انیمیشن: اسلاید خطی 1 ثانیه؛ ) .inner (موقعیت: نسبی؛ بالشتک: 20 پیکسل ; ) .modal__header ( حاشیه-پایین: 1px یکدست تیره ($color-bg، 5%)؛ ) .modal__footer (تراز متن: مرکز؛ دکمه (نمایشگر: inline-block; ))

سبک ها بسیار ساده هستند، آنها ذخیره می شوند فایل جداگانهو نباید هنگام ویرایش آنها برای توسعه دهنده ای که حداقل یک بار با 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 ("صفحه بارگیری شده است!)");
});

فراخوانی یک پنجره مودال jQuery از یک پیوند با CSS مرحله بعدی ایجاد یک پنجره مودال با کلیک روی پیوند است. پس زمینه به آرامی تیره می شود.

اغلب می توانید ببینید که فرم های ورود و ثبت نام در چنین پنجره هایی قرار دارند. بریم به کسب و کار برسیم

ابتدا قسمت html را بنویسیم. ما این کد را در متن سند شما قرار می دهیم.

فراخوانی یک پنجره مودال

متن پنجره معین
بستن
متن در یک پنجره مودال.

کد CSS. یا در یک فایل css جداگانه یا در هد.

بدن (
font-family:verdana;
اندازه فونت: 15px;
}
پیوند. (رنگ:#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;
}
.محتوا(
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();
});
});