Ар кандай максаттардагы калкыма терезелер веб-курулушта көп колдонулат. Алардын жардамы менен ар кандай менюларды түзүүгө болот, жарнамалык тексттерди жана графикаларды, татаал бланктарды толтурууда колдонмо кеңештерин жайгаштырууга болот жана бланкта орун ээлебеген терезелерге формаларды өзүлөрү жайгаштыруу ыңгайлуу. Биздин макалада сиз ушундай терезени кантип жасоого болору жөнүндө сүрөттөмө таба аласыз.
Ал зарыл
HTML жөнүндө негизги билим
Нускамалар
1 кадам
калкыма, HTML, жашыруун катмар
2-кадам
Интернеттеги көптөгөн баракчаларда, ар кандай JavaScript алкактарындагы кооз китепканалар (jQuery, MooTools, Prototype ж.б.) беттеринде калкып чыкма терезелерди түзүү үчүн колдонулгандыгын көрө аласыз. Бирок, чындыгында, алар ушул өзгөчө көйгөйдү чечүүдө зарыл эмес. Гипертекст белгилөө тили (HTML) жана Каскаддык стиль барактары (CSS) колдонмолорунда калкыма терезелерди түзүү жетиштүү. Ушул жол менен түзүлгөн терезелер, зыяратчынын браузеринде JavaScript иштетилгенине карабастан иштейт.
Калкып чыкманы жараткан бардык кодду эки сапка жайгаштырса болот. Биринчи сап шилтемени жаратат, аны калкып чыкканы көрсөтүү үчүн басуу керек:
Бул жерди чыкылдатыңыз!
Бул жерде, шилтеме тегинин onmouseover атрибуту шилтемелер үчүн демейки чычкан курсорунун түрүн орнотот. Onclick атрибуту шилтемени чыкылдатканда, жашырылган PopUp блогу көрүнүп турушу керектигин көрсөтөт.
Экинчи сап, чындыгында, калкыма терезе. PopUp идентификатору менен катмар жана терезенин өлчөмү, тексттин түсү жана көлөмү, стиль атрибутунда көрсөтүлгөн фон жана чек:
Бул калкыма терезедеги текст
Ал демейки боюнча көрүнбөйт - бул катмар стилинин сүрөттөлүшүндө эч кандай мааниге ээ эмес дисплей тандагыч тарабынан көрсөтүлөт.
Чындыгында, бул сизге калкыма терезе түзүү үчүн жетиштүү нерсе - бул эки сапты тегдер менен баракчаңыздын ортосуна койсоңуз, ал даяр.
3-кадам
Тегдин алдындагы калкыма терезени жабуу үчүн, карама-каршы иш-аракетти жасоочу шилтемени кошуу керек - көрүнүп турган катмарды PopUp идентификатору менен жашыруу:
жакын
4-кадам
Эгер сиз терезени чыкылдатуу менен эмес, чычкан курсорун жылдыруу менен калкып чыгышын кааласаңыз, анда шилтемеси бар биринчи сап ушул жол менен өзгөртүлүшү керек:
чычканды бул жакка жылдыр!
5-кадам
Сиз калкыма терезе кодунун принциби жана структурасы менен тааныштыңыз, анын сырткы көрүнүшүнүн жана мазмунунун дизайны толугу менен сиздин максаттарыңыздан жана фантазияңыздан көз каранды.
