پنجره های بازشو برای اهداف بسیار متنوع در ساخت وب کاربردهای زیادی دارند. می توان از آنها برای ایجاد انواع مختلف منوها ، قرار دادن متن ها و گرافیک های تبلیغاتی ، نکات راهنما هنگام پر کردن فرم های پیچیده استفاده کرد و راحت است که فرم ها را در ویندوزهایی که فضای صفحه را اشغال نمی کنند قرار دهید. در مقاله ما توضیحی در مورد چگونگی ایجاد چنین پنجره ای پیدا خواهید کرد.
لازم است
دانش پایه HTML
دستورالعمل ها
مرحله 1
پنجره بازشو ، html ، لایه مخفی
گام 2
در بسیاری از صفحات وب ، می بینید که از کتابخانه های فانتزی مختلف فریم ورک JavaScript (jQuery ، MooTools ، Prototype و …) برای ایجاد پنجره های بازشو در صفحات استفاده می شود. با این حال ، در واقع ، آنها در هنگام حل این مشکل خاص لازم نیستند. ابزارهای موجود در Hypertext Markup Language (HTML) و Cascading Style Sheets (CSS) برای ایجاد پنجره های بازشو کافی هستند. ویندوزهای ایجاد شده به این روش صرف نظر از فعال بودن JavaScript در مرورگر بازدید کننده کار خواهند کرد.
تمام کدی که پنجره بازشو را ایجاد می کند را می توان در دو خط قرار داد. خط اول پیوندی ایجاد می کند که برای نمایش پنجره بازشو باید روی آن کلیک کنید:
اینجا کلیک کنید!
در اینجا ، ویژگی onmouseover از برچسب پیوند نوع مکان نما پیش فرض ماوس را برای پیوندها تعیین می کند. ویژگی onclick مشخص می کند که با کلیک روی پیوند ، بلوک پنهان PopUp باید قابل مشاهده باشد.
خط دوم در واقع پنجره بازشو است. لایه ای با شناسه PopUp و اندازه پنجره ، رنگ و اندازه متن ، پس زمینه و حاشیه مشخص شده در ویژگی سبک:
این متن موجود در پنجره بازشو است
به طور پیش فرض قابل مشاهده نیست - این توسط انتخابگر صفحه با مقدار هیچکدام در توضیحات سبک لایه نشان داده می شود.
در واقع ، این تنها چیزی است که شما برای ایجاد یک پنجره بازشو نیاز دارید - این دو خط را بین برچسب ها و صفحه خود قرار دهید و آماده است.
مرحله 3
برای اینکه بتوانید پنجره pop-up جلوی برچسب را ببندید ، باید پیوندی اضافه کنید که عملکرد مخالف را انجام دهد - لایه قابل مشاهده با شناسه PopUp را مخفی کنید:
بستن
مرحله 4
و اگر می خواهید پنجره نه با کلیک کردن ، بلکه با قرار دادن نشانگر ماوس در آن ظاهر شود ، اولین خط با پیوند باید به این ترتیب اصلاح شود:
ماوس را به اینجا منتقل کنید!
مرحله 5
اکنون با اصل و ساختار کد پنجره بازشو آشنا هستید و طراحی ظاهر و محتوای آن کاملاً به اهداف و تخیل شما بستگی دارد.
