JQuery модалдык терезеси - бул эмне үчүн жана аны кантип орнотуу керек

Мазмуну:

JQuery модалдык терезеси - бул эмне үчүн жана аны кантип орнотуу керек
JQuery модалдык терезеси - бул эмне үчүн жана аны кантип орнотуу керек
Anonim

Сурооңузга жооп табуу үчүн, кээде көп убакыт коротушуңуз керек, айрыкча веб-дизайнга келсек, мындай иштерди билбеген адам сайт түзүүнү чечсе өз алдынча. JQuery модалдык терезеси ушундай азаптуу иштердин бири болушу мүмкүн.

Мындай терезелерди Интернеттен көп таба аласыз. Аларды көчүрүп, сайтыңызга коюу керек окшойт… Бирок, баары эле жөнөкөй эмес. Бактыга жараша, бардыгын жайлаткан бир детал бар жана бул милдетти чечүү мүмкүн эмес, анткени бул үчүн зарыл болгон билим жок. Ошондуктан, jQuery'деги модалдык терезени ишке ашыруу кыйын болгон көптөгөн кызыктуу функцияларды дароо коркутуунун ордуна, эч кандай керексиз көйгөйлөрсүз кичинекей, эң жөнөкөй модалдык терезеден баштаганыңыз жакшы.

Эгерде WordPressте блог бар болсо, анда бардыгы абдан жөнөкөй жана адатта эч кандай кыйынчылыктар болбойт, анткени анда көптөгөн даяр чечимдер бар - түрдүү калкыма модулдар. Бирок такыр башка варианттар бар, аларда сиз модалдык терезени өзүңүз "скульпациялашыңыз" керек же адистердин акы төлөнүүчү кызматтарына кайрылышыңыз керек. Белгилүү болгондой, эч ким төлөгүсү келбейт, айрыкча, сиз жөн гана иштин түбүнө жетишиңиз керектей сезилгенде, баары тез жана тез болуп калат.толугу менен акысыз.

Барактагы маалымат менен кошо турган жана аны толуктаган мазмунду көрсөтүү үчүн jQuery модалдык терезеси керек.

jQuery - бул эмне?

Толук түшүнүү үчүн, эгер кимдир бирөө билбесе, анда jQuery бул JavaScript китепканасы, ал эми экинчиси, өз кезегинде, веб-баракчанын кодуна кыстарылган жана жетишүүгө мүмкүндүк берген коддун бир бөлүгүн билдирет. HTML жана CSS ичинде ишке ашырылбай турган ар кандай эффекттер. Мындай коддун үлгүсү баракта көрсөтүлгөн учурдагы күн же убакыт болот.

Китепкананы иштеп чыгуучулардын расмий веб-сайты бар, ал дайыма өркүндөтүлүп жана жаңыланып турат, ага байланыштуу жаңы китепканаларды сунуштаган бардык жаңы версиялар бар.

JQueryге сизге тигил же бул эффект керек экенин айтуу үчүн, стилдер баракчалары бар CSS тили бар.

CSS тили

CSS каскаддык стилдердин баракчаларын билдирет. Азыр Интернетте бул тилди колдонбогон сайтты табуу мүмкүн эмес.

Демек, модалдык терезелерде jQuery жана CSS дээрлик ажырагыс жана алмаштырылгыс. Ошондуктан, jQuery камтылбаса, муну кылышыңыз керек.

Бул үчүн баш тегинин ичине төмөнкүлөр киргизилет:

jQuery
jQuery

Модалдар эмне үчүн?

Сайт жүктөлгөндө көрсөтүлүүчү жөнөкөй jQuery модалы көбүрөөк жолдоочуларды алуу үчүн пайдалуу болушу мүмкүн. Барак ачылганда терезе пайда болот. Бул өтө алаксытпайт жана эч кимди коркутууга мүмкүн эмес, анткени кичине эле ыңгайсыздыкта оңой элежабылат, ал эми жабуу баскычында кукилер болот жана аны басканда, жок болгон модалдык терезе кайра ачылбайт.

Калкма терезе

Ар бир бетке бир жолу гана пайда болгон jQuery калкыма терезеси модалдык терезелердин вариациясы.

Аны ишке ашыруу үчүн бир катар кадамдарды жасоо керек.

Сиз модалдык терезелер үчүн атайын плагиндерди колдонсоңуз болот. Аларды arcticModal сыяктуу иштеп чыгуучулардын сайттарынан жүктөө эң жакшы. Ал төмөнкүдөй туташат:

jQuery модалдык терезеси
jQuery модалдык терезеси

Терезе стили жок, стандарттуу плагин темаларынын бири мындай болот:

jQuery жөнөкөй модалдык терезеси
jQuery жөнөкөй модалдык терезеси

Андан кийин cookie плагини туташты:

jQuery модалдык терезеси
jQuery модалдык терезеси

Колдонуучуга маалымат берген HTML кодун жазуу:

jQuery модалдык терезеси
jQuery модалдык терезеси

Коддо көрсөтүлгөн arctimonial-жабуу классы jQuery модалдык терезеси аны менен жабылат дегенди билдирет.

Кийинки акыркы сценарий келет:

jQuery калкыма модалы
jQuery калкыма модалы

Колдонулган параметрлердин айрымдары төмөнкүлөрдү билдирет:

closeOnOverClick: катмар басылганда терезе жабыларын аныктайт.

CloseOn Esc: Esc баскычын чыкылдатууну билдирет.

Мөөнөтү бүтөт: Куки сактала турган убакытты белгилейт. Сунушталган вариантта бул убакыт алтымыш күн болот, башкача айтканда, терезе эки ай бою көрсөтүлбөйт. Куки ар бир барган сайын жаңыртылып турат.

Сизге орнотууну үйрөнүүСайттагы jQuery модалдык терезеси, зарыл болсо, татаалыраак варианттарга өтсөңүз болот. Бул үчүн ар кандай CSS стилдери кошулуп, терезе башка сайттардагы модалдык терезелерден такыр башкача болуп калат.

Фантазия жана фантазия мындай чечимдердин аркасында жазылуучулардын санын олуттуу көбөйтүүгө жардам берет, ал эми интернет-дүкөндөрдөгү чебердик менен киргизилген модалдык терезелер сатууну бир нече эсеге көбөйтөт. Демек, терезелерди программалоого жана орнотууга кеткен убакыт өзүн актап, өзүн актайт!

Модалдык терезелердин түрлөрү

Модалдык терезелер сиз тиешелүү баскычты басканда калкып чыкса болот же баракча менен кошо жүктөлөт жана жүктөлгөндө дароо пайда болот. Жогоруда сүрөттөлгөн мисалдагыдай куки коюлган болсо, алар жабылганда көрүнбөй калышы мүмкүн же бет жүктөлгөн сайын пайда болушу мүмкүн. Модалдык терезелер бар, алар беттеги кыймылдарга карабастан, бир жерде бекитилип, анда кала берет жана терезеде шилтемеси бар маалымат камтылганда жана колдонуучу ал аркылуу өткөндө динамикалык болушу мүмкүн. Андан кийин терезе гана жаңыртылып, түпнуска бет өзгөрүүсүз калат.

Сунушталууда: