، با مقداری محتوا در داخل و دکمه "بستن" که به طور کامل با استفاده از css تشکیل شده است.

باز کردن پنجره 1 باز کردن پنجره 2 ویدیو در پنجره 3 عکس در پنجره 4

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

مرحله 2: CSS

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

/* سبک های پایه برای لایه محو و مدال */ .پوشش (بالا: 0؛ راست: 0؛ پایین: 0؛ چپ: 0؛ شاخص z: 1؛ نمایان: پنهان؛ /* پس زمینه محو شده */ رنگ پس زمینه : rgba(0, 0, 0, 0.7)؛ کدورت: 0؛ موقعیت: ثابت؛ /* موقعیت ثابت */ مکان نما: پیش فرض؛ /* نوع مکان نما */ -webkit-transition: opacity 0.5s؛ -moz-transition: opacity 0.5s؛ -ms-transition: opacity 0.5s؛ -o-transition: opacity 0.5s؛ transition: opacity. 0 ؛ راست: 0؛ پایین: 0؛ چپ: 0؛ نمایشگر: بلوک؛ حاشیه: خودکار؛ عرض: 100 درصد؛ ارتفاع: خودکار؛ /* دور گوشه های تصاویر درون خطی */ -webkit-border-radius: 4px. -moz- border-radius: 4px؛ -ms-border-radius: 4px; border-radius: 4px; ) /* عناصر رسانه جاسازی شده، فریم ها */ embed، iframe (بالا: 0؛ راست: 0؛ پایین: 0؛ سمت چپ: 0؛ نمایش: بلوک؛ حاشیه: خودکار؛ حداقل عرض: 320 پیکسل؛ حداکثر عرض: 600 پیکسل؛ عرض: 100 درصد؛ ) .popup h1 (/* عنوان 1 */ رنگ: #008000؛ تراز متن: چپ ؛ text-shadow: 0 1p x 3px rgba(0,0,0,.3); فونت: 24px "Trebuchet MS", Helvetica, sans-serif; فونت-وزن: پررنگ; ) .popup h2 (/* heading 2 */ color: #008000; text-align: left; text-shadow: 0 1px 3px rgba(0,0,0,.3)؛ فونت:22px "Trebuchet MS", Helvetica , sans-serif; ) /*** سبک دادن به حالت ***/ .popup (بالا: 0؛ راست: 0؛ چپ: 0؛ اندازه قلم: 14 پیکسل؛ z-index: 10؛ نمایش: بلوک؛ نمایان: پنهان؛ حاشیه: 0 خودکار؛ عرض: 90 درصد؛ حداقل عرض: 320 پیکسل؛ حداکثر عرض: 600 پیکسل؛ /* موقعیت ثابت، پنجره ثابت در اسکرول */ موقعیت: ثابت؛ بالشتک: 15 پیکسل؛ حاشیه: 1 پیکسل ثابت #383838؛ /* گوشه های گرد */ -webkit-border-radius: 4px؛ -moz-border-radius: 4px؛ -ms-border-radius: 4px; border-radius: 4px; background-color: #FFFFFF; /* جعبه بیرونی shadow */ -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8)؛ -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8)؛ -ms-box - shadow: 0 0 6px rgba(0, 0, 0, 0.8)؛ -o-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8)؛ box-shadow: 0px 0px 6px rgba(0, 0 , 0، 0.8)؛ /* شفافیت کامل پنجره، روی کلیک */ opacity: 0 نمایش داده می شود؛ /* اثر گذار (ظاهر) */ -webkit-transiti در: همه ease 0.5s; -moz-transition: همه ease 0.5s. -ms-transition: همه ease 0.5s. -o-transition: همه ease 0.5s; انتقال: همه سهولت 0.5s; ) /* فعال کردن پنجره بازشو و کم نور پس زمینه */ .overlay:target+.popup (بالا: 20%؛ /* موقعیت پنجره از بالای صفحه هنگام بازشو */ قابلیت مشاهده: قابل مشاهده؛ کدورت: 1؛ /* حذف شفافیت */ ) / * دکمه بستن را تشکیل دهید */ .close ( موقعیت: مطلق؛ بالا: -10 پیکسل؛ سمت راست: -10 پیکسل؛ بالشتک: 0؛ عرض: 20 پیکسل؛ ارتفاع: 20 پیکسل؛ حاشیه: 2 پیکسل جامد #cccc؛ -webkit-border-radius : 15px؛ -moz-border-radius: 15px؛ -ms-border-radius: 15px؛ -o-border-radius: 15px؛ border-radius: 15px؛ background-color: rgba(61, 61, 61, 0. 8)؛ -webkit-box-shadow: 0px 0px 10px #000; -moz-box-shadow: 0px 0px 10px #000; box-shadow: 0px 0px 10px #000; text-align: center; text-decoration: هیچ; فونت-وزن: پررنگ; ارتفاع خط: 20 پیکسل؛ /* مقادیر و اثر گذار را روی شناور تنظیم کنید */ -webkit-transition: all ease 0.8s; -moz-transition: همه ease 0.8s. -ms-transition: همه ease 0.8s. -o-transition: همه ease 0.8s; انتقال: همه سهولت 0.8s; بستن بستن -transform: rotate (360 deg)؛ -o-transform: rotate (360 deg); transform: rotate (360 deg); ) /* در هنگام افزودن پیوست ها اختیاری است */ .popup p، .popup div ( margin-bottom: 10px; )

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

امروزه برای سایت های مختلف، انواع پنجره های پاپ آپ مدال - پاپ آپ ها - برای ثبت نام، مجوز، پنجره های اطلاعاتی، - در اشکال و اندازه های مختلف، به یک امر عادی تبدیل شده است. همچنین تعداد زیادی افزونه علاوه بر jQuery برای ساده و ایجاد راحتچنین پاپ آپ هایی - برای مثال همان Shadowbox.

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

کد HTML پاپ آپ معمولاً ساختار زیر را دارد:

-- پاپ آپ با محتوا -->

و css( در اینجا و در زیر، من عمداً نوشتن برخی از ویژگی هایی را که فقط برای برخی از مرورگرها و نسخه های آنها ضروری است حذف می کنم و فقط ابتدایی ترین آنها را باقی می گذارم.):

همپوشانی پاپ آپ(
موقعیت : ثابت
سمت چپ: 0
بالا : 0 ;
پس زمینه: #000
کدورت: 0.5
فیلتر : آلفا (تعوض = 50 );
z-index : 999
}
پاپ آپ (
موقعیت : مطلق ;
عرض: 20%
z-index : 1000 ;
حاشیه: 1px جامد #ccc ;
پس زمینه: #fff
}

JS نسخه مرورگر و مرورگر را تعیین می کند و اندازه ها را بر اساس آن محاسبه می کند منطقه کارو ابعاد خود پنجره (اگر تنظیم نشده باشند)، و سپس محاسبات ساده موقعیت گوشه سمت چپ بالای آن انجام می شود (ویژگی های css چپ و بالا برای .popup). بسیاری از افزونه ها نیز به تغییر اندازه صفحه واکنش نشان می دهند و هر بار کل مطلب را دوباره محاسبه می کنند، به طوری که پنجره بازشو دقیقاً در مرکز فضای کاری قرار می گیرد.

من ذاتاً یک کمال گرا هستم (می دانم که گاهی اوقات بد است) و اغلب حتی با جزئیات کوچک خود را به زحمت می اندازم و سعی در بهبود و افزودن حداکثر قابلیت گسترش ممکن به این جزئیات دارم و نمی توانم به این لحظه خاص در کار علاقه نداشته باشم. از تمام این پلاگین ها این ایده مطرح شد که تمام کارهای موقعیت یابی popup را می توان از شانه های JS به شانه های خود مرورگر منتقل کرد، یعنی این کار را می توان با استفاده از CSS انجام داد.

این کاری است که ما انجام خواهیم داد.

در زیر مثالی از یک پنجره بازشو ارائه خواهم داد که در تمام نسخه های اصلی مرورگرهای اصلی کار می کند. برای اینکه در IE به درستی کار کند<9 необходима некоторая экстра-разметка и хаки, потому детальное описание написания такого метода я опущу, а для интересующихся выложу полную версию.

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

ابتدا کد HTML. ساختار آن کمی متفاوت از کد ذکر شده در بالا خواهد بود، چرا - در ادامه مقاله در مورد آن بیشتر توضیح خواهیم داد. کلاس های عنصر ثابت خواهند ماند:

< div class ="popup__overlay">
< div class ="popup">

و مقداری CSS:

همپوشانی پاپ آپ(
موقعیت : ثابت
سمت چپ: 0
بالا : 0 ;
عرض: 100%
ارتفاع: 100%
z-index : 999
}
پاپ آپ (
}

اندازه های ثابت

ساده ترین گزینه. هیچ چیز جدیدی نیاز به اختراع نیست.

پنجره بازشو (
سمت چپ: 50%
بالا : 50% ;
عرض: 400 پیکسل
ارتفاع : 200 پیکسل
حاشیه سمت چپ: -200 پیکسل
حاشیه بالا: -100 پیکسل
}

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

اندازه پاپ آپ به محتوا بستگی دارد

اول - تراز افقی - به نظر می رسد آسان تر است. اگر پنجره بازشو دارای عرض ثابت باشد، موارد زیر کافی است:

پنجره بازشو (
حاشیه: خودکار
}

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

چیدمان عمودی. اینجاست که جالب می شود. البته شبیه سازی جدول یا جدول با display: table & display: table-cell بدون هیچ مشکلی از عهده چنین کاری بر می آمد، اما ساخت این کار در IE قدیمی گران تر است. جدول نیز ناپدید می شود - به دلایل واضح.

بنابراین، حاشیه در حال حاضر از بین رفته است - ما اندازه ها را نمی دانیم. بیایید به یاد داشته باشیم که خواص با اثرات مشابه چیست. بله، متن را تراز کنید. اما فقط برای عناصر درون خطی. خوب. به نظر می رسد که خود خدا دستور داده است که از display: inline-block استفاده شود - یک عنصر بلوکی که می توانید ویژگی های عناصر درون خطی را به آن اعمال کنید. با پشتیبانی از این ویژگی، همه مرورگرها نیز همه چیز را، شاید بتوان گفت، مرتب دارند. کد چیزی شبیه به این می شود:

همپوشانی پاپ آپ(
موقعیت : ثابت
سمت چپ: 0
بالا : 0 ;
عرض: 100%
ارتفاع: 100%
z-index : 999 ;
text-align : مرکز
}
پاپ آپ (
نمایش : inline -block ;
عمودی-تراز: وسط
}

آنچه باقی می ماند تراز عمودی است - تراز عمودی برای ما خوب است. در هر موقعیت دیگری، استفاده از ارتفاع خط نیز مناسب است، اما از آنجایی که ارتفاع صفحه ثابتی نداریم (ارتفاع خط در این زمینه)، نمی‌توانیم از آن در اینجا استفاده کنیم. یکی از ترفندهایی که به کمک می آید، تراز عمودی عناصر با اندازه های ناشناخته است. دقیقاً به یاد دارم که این روش را در Habré پیدا کردم، اما متأسفانه نتوانستم پیوندی به آن موضوع پیدا کنم. این روش شامل موارد زیر است: یک عنصر بلوک درون خطی با عرض صفر و 100٪ ارتفاع والد اضافه می شود که ارتفاع خط را تا 100٪ ارتفاع والد، یعنی به ارتفاع فضای کاری صفحه "بسط" می دهد. . بیایید آن را زیباتر کنیم - به جای نشانه گذاری اضافی، از شبه عناصر استفاده خواهیم کرد:

Popup_overlay : After (
نمایش : inline -block ;
عرض: 0
ارتفاع: 100%
vertical-align : وسط ;
محتوا : ""
}

باقی مانده است که یک کم نور شفاف به پوشش اضافه کنید - rgba این کار را انجام خواهد داد. همه چيز! اکنون موقعیت پنجره بازشو فقط توسط ابزارهای مرورگر در سطح CSS تنظیم می شود.

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

بیشتر اوقات، چنین پنجره هایی پس از انجام برخی اقدامات در سایت ظاهر می شوند، به عنوان مثال، کاربر روی پیوند "سفارش پاسخ به تماس" کلیک می کند و یک فرم سفارش در مقابل او ظاهر می شود.

استفاده از پنجره های پاپ آپ در ارتباط با ajax بسیار راحت است، اما این موضوع برای درس دیگری است.

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

در تماس با

فیس بوک

توییتر

من فکر می کنم دلایل کافی برای شروع بررسی این سوال وجود دارد: چگونه یک پنجره پاپ آپ در سایت خود ایجاد کنیم.

بیان مشکل (TOR)

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

راه حل

روش 1

html

css

*( font-family: Areal; ) .b-container( عرض: 200 پیکسل؛ ارتفاع: 150 پیکسل؛ رنگ پس زمینه: #cccc؛ حاشیه: 0 پیکسل خودکار؛ بالشتک: 10 پیکسل؛ اندازه قلم: 30 پیکسل؛ رنگ: #fff؛ ) .b-popup(عرض: 100%؛ ارتفاع: 2000 پیکسل؛ پس‌زمینه رنگ: rgba (0,0,0,0.5)؛ سرریز: پنهان؛ موقعیت: ثابت؛ بالا: 0px؛ .b-popup .b-popup -content( حاشیه: 40 پیکسل خودکار 0 پیکسل خودکار؛ عرض: 100 پیکسل؛ ارتفاع: 40 پیکسل؛ بالشتک: 10 پیکسل؛ رنگ پس زمینه: #c5c5c5؛ شعاع حاشیه: 5 پیکسل؛ کادر سایه: 0 پیکسل 0 پیکسل 10 پیکسل #000؛ )

نتیجه:

اغلب استفاده از:

موقعیت: مطلق؛
بله، نتیجه مشابه است، اما به دلیل این واقعیت که ما ارتفاع بلوک "fade" را تنظیم کرده ایم، نوارهای اسکرول ظاهر می شوند. به همین دلیل این روش مناسب نیست.

روش 2

این روش اساساً با روش 1 متفاوت نیست، اما به نظر من راحت تر است.

html (بدون تغییر)

css

*( font-family: Areal; ) .b-container( عرض: 200 پیکسل؛ ارتفاع: 150 پیکسل؛ رنگ پس زمینه: #cccc؛ حاشیه: 0 پیکسل خودکار؛ بالشتک: 10 پیکسل؛ اندازه قلم: 30 پیکسل؛ رنگ: #fff؛ ) .b-popup(عرض: 100%؛ حداقل ارتفاع: 100%؛ رنگ پس‌زمینه: rgba(0,0,0,0.5)؛ سرریز: پنهان؛ موقعیت: ثابت؛ بالا: 0px؛ .b-popup . b-popup-content( margin:40px auto 0px auto; عرض:100px; ارتفاع: 40px; padding:10px; background-color: #c5c5c5; border-radius:5px; box-shadow: 0px 0px 10px #000;)

نتیجه مشابه است

با تشکر از ملک: حداقل ارتفاع: 100%;بلوک "محو" ما روی 100٪ عرض تنظیم شده است حداقل ارتفاعدر صفحه نمایش 100%

تنها منفی این روشآن است اینترنت اکسپلوررفقط از نسخه 8.0 این ویژگی را پشتیبانی می کند.

اضافه کردن جادو به جی کوئری

حالا بیایید پیوندهایی را برای پنهان کردن/نمایش پنجره بازشو اضافه کنیم.

برای انجام این کار، باید کتابخانه jQuery و یک اسکریپت کوچک را اضافه کنید:

شما همچنین باید Html را به روز کنید:

نتیجه

هنگامی که صفحه بارگیری می شود، PopUp مخفی می شود.

نتیجه را می توان در اینجا مشاهده کرد.

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

بیشتر اوقات، چنین پنجره هایی پس از انجام برخی اقدامات در سایت ظاهر می شوند، به عنوان مثال، کاربر روی پیوند "سفارش پاسخ به تماس" کلیک می کند و یک فرم سفارش در مقابل او ظاهر می شود.

استفاده از پنجره های پاپ آپ در ارتباط با ajax بسیار راحت است، اما این موضوع برای درس دیگری است.

منابع وب بیشتر و بیشتری در وب ظاهر می شوند که از پاپ آپ های پاپ آپ استفاده می کنند. به عنوان مثال می توان به شبکه های اجتماعی معروف اشاره کرد. تمام داده های غیر ضروری از اسکرین شات ها حذف شده است.

در تماس با

فیس بوک

توییتر

من فکر می کنم دلایل کافی برای شروع بررسی این سوال وجود دارد: چگونه یک پنجره پاپ آپ در سایت خود ایجاد کنیم.

بیان مشکل (TOR)

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

راه حل

روش 1

html

css

*( font-family: Areal; ) .b-container( عرض: 200 پیکسل؛ ارتفاع: 150 پیکسل؛ رنگ پس زمینه: #cccc؛ حاشیه: 0 پیکسل خودکار؛ بالشتک: 10 پیکسل؛ اندازه قلم: 30 پیکسل؛ رنگ: #fff؛ ) .b-popup(عرض: 100%؛ ارتفاع: 2000 پیکسل؛ پس‌زمینه رنگ: rgba (0,0,0,0.5)؛ سرریز: پنهان؛ موقعیت: ثابت؛ بالا: 0px؛ .b-popup .b-popup -content( حاشیه: 40 پیکسل خودکار 0 پیکسل خودکار؛ عرض: 100 پیکسل؛ ارتفاع: 40 پیکسل؛ بالشتک: 10 پیکسل؛ رنگ پس زمینه: #c5c5c5؛ شعاع حاشیه: 5 پیکسل؛ کادر سایه: 0 پیکسل 0 پیکسل 10 پیکسل #000؛ )

نتیجه:

اغلب استفاده از:

موقعیت: مطلق؛
بله، نتیجه مشابه است، اما به دلیل این واقعیت که ما ارتفاع بلوک "fade" را تنظیم کرده ایم، نوارهای اسکرول ظاهر می شوند. به همین دلیل این روش مناسب نیست.

روش 2

این روش اساساً با روش 1 متفاوت نیست، اما به نظر من راحت تر است.

html (بدون تغییر)

css

*( font-family: Areal; ) .b-container( عرض: 200 پیکسل؛ ارتفاع: 150 پیکسل؛ رنگ پس زمینه: #cccc؛ حاشیه: 0 پیکسل خودکار؛ بالشتک: 10 پیکسل؛ اندازه قلم: 30 پیکسل؛ رنگ: #fff؛ ) .b-popup(عرض: 100%؛ حداقل ارتفاع: 100%؛ رنگ پس‌زمینه: rgba(0,0,0,0.5)؛ سرریز: پنهان؛ موقعیت: ثابت؛ بالا: 0px؛ .b-popup . b-popup-content( margin:40px auto 0px auto; عرض:100px; ارتفاع: 40px; padding:10px; background-color: #c5c5c5; border-radius:5px; box-shadow: 0px 0px 10px #000;)

نتیجه مشابه است

با تشکر از ملک: حداقل ارتفاع: 100%;بلوک "محو" ما روی 100٪ عرض تنظیم شده است حداقل ارتفاعدر صفحه نمایش 100%

تنها عیب این روش این است که اینترنت اکسپلورر فقط از این ویژگی از نسخه 8.0 پشتیبانی می کند.

اضافه کردن جادو به جی کوئری

حالا بیایید پیوندهایی را برای پنهان کردن/نمایش پنجره بازشو اضافه کنیم.

برای انجام این کار، باید کتابخانه jQuery و یک اسکریپت کوچک را اضافه کنید:

شما همچنین باید Html را به روز کنید:

نتیجه

هنگامی که صفحه بارگیری می شود، PopUp مخفی می شود.

نتیجه را می توان در اینجا مشاهده کرد.

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

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

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

این زمانی است که بررسی کنید همه چیز خوب کار می کند:

بیایید نصب را شروع کنیم:

پنجره با دکمه

css

Butksaton-satokavate (
صفحه نمایش: بلوک درون خطی
text-decoration: هیچ;
حاشیه سمت راست: 7px;
شعاع حاشیه: 5 پیکسل
padding: 7px 9px;
پس زمینه: #199a36;
رنگ: #fbf7f7 !important;
}

آنلومن (
نمایش: فلکس;
موقعیت: ثابت
سمت چپ: 0;
بالا: -100%;
عرض: 100%
ارتفاع: 100%;
align-اقلام: مرکز;
justify-content: center;
کدورت: 0
-webkit-transition: 0s top 0.7s، opacity 0.7s 0s.
انتقال: 0s بالا 0.7s، کدورت 0.7s 0s.
}

Anelumen: target (
بالا: 0;
کدورت: 1
-webkit-transition: هیچ.
انتقال: هیچ
}

شکل آنلومن (
عرض: 100%
حداکثر عرض: 530 پیکسل
موقعیت: نسبی;
بالشتک: 1.8em
کدورت: 0
رنگ پس زمینه: سفید
-webkit-transition: opacity 0.7s;
انتقال: کدورت 0.7s;
}

شکل Anelumen.lowingnuska (
پس زمینه: #f9f5f5;
شعاع حاشیه: 7 پیکسل
padding-top: 8px;
حاشیه: 3px جامد #aaabad;
}

Anelumen.lowingnuska شکل h2 (
حاشیه بالا: 0;
padding-bottom: 3px
حاشیه-پایین: 1px جامد #dcd7d7;
}

Anelumen: شکل هدف (
کدورت: 1
}

anelumen.lowingnuska .compatibg-ukastywise (
text-decoration: هیچ;
موقعیت: مطلق;
سمت راست: 8 پیکسل
بالا: 0px;
اندازه فونت: 41px;
}

Anelumen .nedismiseg (
سمت چپ: 0;
بالا: 0;
عرض: 100%
ارتفاع: 100%;
موقعیت: ثابت
پس زمینه رنگ: rgba (10، 10، 10، 0.87)؛
محتوا: ""؛
مکان نما: پیش فرض;
دید: پنهان؛
-webkit-transition: همه 0.7s.
انتقال: همه 0.7s;
}

Anelumen:target .nedismiseg (
دید: قابل مشاهده
}

همچنین ارزش دانستن این نکته را دارد که استایل CSS و شبه کلاس‌بندی یکی از آن ویژگی‌های CSS است که به طور کامل مورد سوء استفاده قرار نگرفته و برنامه‌های بالقوه جالب بسیاری دارد.

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