سپس باید یک کلاس اضافه کنیم مدال فعال است، این کلاس مسئول فراخوانی پنجره مدال خواهد بود، 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 مواجه شده است، مشکل ایجاد کند.

مرحله 3JS

آخرین، اما نه کم اهمیت ما، تار شدن خودکار پس زمینه هنگام ظاهر شدن منو و همچنین قابلیت کلیک روی پیوندها خواهد بود، قوانین کوچک به ما در این امر کمک می کند. JS:

$("body").addClass("is-blurred"); $(".toggleModal").on("کلیک"، تابع (رویداد) ( event.preventDefault(); $(".modal").toggleClass("is-active")؛ $("body").toggleClass ("مایل است"));

در نتیجه، پنجره‌های مودال فوق‌العاده‌ای دریافت می‌کنیم که چشم بازدیدکننده را خوشایند می‌کنند و طراحی شما را به هم نمی‌ریزند.

1. پنجره Modal در jQuery "Simple Modal Box"

2. پلاگین جی کوئری "LeanModal"

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

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

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

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

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

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

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

6. Mootools Modal Window، پلاگین MooDialog

7. نوار بازشو jQuery در بالای صفحه

8.jQuery Popup

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

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

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

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

گفتگوی بازشو jQuery منظم.

12. jQuery Modals

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

13. jQuery Modals

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

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 پیکسل

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

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

طرح بندی CSS

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

#fade (نمایش: هیچ ; /*-- پیش فرضپنهان است--*/پس زمینه: rgba (7، 87، 207، 0.8); موقعیت : ثابت سمت چپ: 0 بالا : 0 ; عرض: 100% ارتفاع: 100% کدورت: .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 ; شعاع مرزی: 12 پیکسل ) .popup_block p ( وزن فونت : 400 ؛ بالشتک : 0 ؛ حاشیه : 0 ؛ رنگ : # 000 ؛ ارتفاع خط : 1.6 ; ) .popup_block h2 ( حاشیه : 0px 0 10px , 4 رنگ 3,4px ) ؛ وزن قلم : 400 ؛ تراز متن : مرکز ؛ متن سایه : 1px 1px 2px #0D0C0C ؛ ) /* دکمه بستن را تشکیل دهید */.close ( پس‌زمینه-رنگ: rgba (61، 61، 61، 0.8)، حاشیه: 2 پیکسل یکپارچه #cccc؛ ارتفاع: 25 پیکسل؛ ارتفاع خط: 20 پیکسل؛ موقعیت: مطلق؛ سمت راست: -17 پیکسل؛ فونت-وزن؛ فونت-وزن text-align : center؛ text-decoration: هیچکدام؛ بالشتک: 0؛ بالا: -17px؛ عرض: 25px؛ -webkit-border-radius: 50%؛ -moz-border-radius: 50%؛ -ms-border- شعاع: 50%؛ -o-border-radius: 50%؛ border-radius: 50%؛ -moz-box-shadow: 1px 1px 3px #000؛ -webkit-box-shadow: 1px 1px 3px #000 ؛ box- سایه : 1px 1px 3px #000 ;) .close : قبل (رنگ : rgba (255 , 255 , 255 , 0.9 ) ؛ محتوا : "X" ؛ اندازه قلم : 12px ؛ text-shadow : 0 -1px 0 , 0 , 0.9 ) ;) .close : شناور ( پس زمینه-رنگ : rgba (252 , 20 , 0 , 0.8 ) ; ) .shadow ( box-shadow : 4px 4px 10px #857373 ;-pxkit ;-wedow 4px 10px #857373 ; -moz-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 ( فونت-00: 4 ؛ بالشتک: 0؛ حاشیه: 0؛ رنگ: #000؛ ارتفاع خط: 1.6؛) : مرکز؛ سایه متن: 1px 1px 2px #0D0C0C؛ ) /* از دکمه بستن */ .close ( پس زمینه und-color: rgba(61, 61, 61, 0.8); حاشیه: 2px جامد #ccc; ارتفاع: 25 پیکسل؛ ارتفاع خط: 20 پیکسل؛ موقعیت: مطلق; سمت راست: -17 پیکسل؛ فونت-وزن: پررنگ; text-align: center; متن-تزیین: هیچکدام؛ بالشتک: 0. بالا: -17px; عرض: 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 از وب سایت کتابخانه، یا از یک فایل جداگانه که در داخل گوگل میزبانی شده است، استفاده کنید و آن را به سند وصل کنید، در بخش قبل از برچسب بسته شدنبا قرار دادن این خط:

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

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

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

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

نتیجه:

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

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

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

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

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