Ўсплывальнае акно jquery, агульныя звесткі па стварэнні

Адным з спосабаў прыцягнення карыстальнікаў на сайт з'яўляюцца усплывальныя вокны. Вядома, гэта не дае стоадсоткавай гарантыі павышэння наведвальнасці, але ўсё-ткі на некаторы час яны прыцягваюць увагу да інфармацыі.

Стварыць ўсплывальнае акно jquery - задача не з лёгкіх, але пры жаданні яна цалкам выканальная. І ўсё ж такі, перад тым, як пачынаць ствараць такі твор, трэба ўяўляць візуальна, што гэта такое і як яно выглядае.

Старонка сайта ствараецца пры дапамозе мовы HTML. На ёй, у тым парадку, які падабаецца ўладальніку рэсурсу, размяшчаюцца кнопкі. Іх можа быць некалькі штук (ад адной да ...), на меркаванне які стварае. Націскаючы на такую кнопачку, наведвальнік будзе бачыць ўсплывальнае акно jquery. Змест гэтых можа быць цалкам розным, напрыклад прывабная малюнак або новая форма рэгістрацыі, рэклама, паведамленне, ды ўсё што заўгодна. Фантазія ў гэтай справе не абмяжоўваецца ніякімі межамі. Усплывальныя вокны часцей за ўсё перакрываюць старонку сайта празрыстым цёмным фонам і на кожным з іх прысутнічае піктаграма, звычайна разумеецца карыстальнікамі на ўзроўні інтуіцыі. Магчымасці дадзенай функцыі бязмежныя.

На першы погляд, стварыць такую рэч складана, але гэта памылковае ўражанне. Калі ёсць жаданне і існуе патрэба, чаму б ў гэтым не разабрацца падрабязней? Нават калі многае незразумела, заўсёды ёсць магчымасць вывучыць працэс, звярнуўшыся да прафесіяналаў. Давайце, да прыкладу, створым і размесцім кнопкі, якія будуць выклікаць вокны рэгістрацыі, малюнкаў або фатаграфій і ўкладкі. Выкарыстоўваючы javascript ўсплывальнае акно, дакладней кнопку, афармляем ў выглядзе спасылкі і задаем для ўсіх іх агульны клас. Спасылкі змяшчаем ўнутр тэга div-а.

Атрыбут rel, дададзены ў кожную, у дакладнасці адпавядае класаваму назве акна і дае магчымасць адкрыць патрэбнае, ён заўсёды, абы клікнуўшы на спасылку. Усе, ўсплывальнае акно jquery мы стварылі. Зараз застаецца яго зрабіць акуратным і прывабным. Для гэтага спатрэбіцца выкарыстанне стыляў.

Праца ў стылях складанасцяў не выклікае: усё проста і зразумела. Трэба толькі хоць трохі валодаць мовай HTML. Але нават калі карыстальнік не разбіраецца ў ім, патрэбныя звесткі лёгка знайсці ў інтэрнэце. Для таго каб кнопкі jquery, усплывальныя вокны выглядалі ва ўсіх вядомых на сённяшні дзень браўзэрах аднолькава прыгожа і акуратна, трэба: а) Цэнтраваць блокі спасылак; б) закругліць вуглы; в) падключыць PIE для ІІ 7-8.

У цэлым, разметка HTML будзе аднолькавай для ўсіх усплываючых вокнаў. Таму на выкарыстанні тэгаў не варта зацыклівацца: калі не валодаеце, досыць запомніць некалькі асноўных. Розніца будзе толькі ў афармленні памераў, то ёсць адно ўсплывальнае акно jquery па шырыні будзе выглядаць некалькі інакш. Тое ж самае тычыцца і змесціва.

Для размяшчэння формы рэгістрацыі ў згаданы вышэй тэг трэба запісаць наступнае:

Close

Рэгістрацыя на сайце

Калі ласка, увядзіце лагін: увядзіце пароль:

У дадзенай запісу reg_form супадае з атрыбутам першай кнопкі rel, а двайны клас абгортваюць блока задаецца popup reg_form (прабел абавязковы). Такі надпіс дазваляе стварыць як агульны стыль для ўсіх усплываючых вокнаў, так і задаць для кожнага паасобку канкрэтныя параметры.

Далей пачынаем размяшчаць кнопку, якая адказвае за карцінкі. Тут таксама самае: паказваецца двайны клас і пазначаецца шлях да тэчцы, дзе гэтыя выявы знаходзяцца. Ну і далей у тым жа духу.

Пасля стварэння застанецца толькі падкарэктаваць агульны знешні выгляд старонкі сайта, прапісаць правілы для вокнаў. Гэта значыць, яны ўсе будуць аднолькава аформленыя, адрэдагаваныя па гарызанталі, і кожнае будзе мець кнопку, якая адказвае за закрыццё самога вокны і яго загалоўка. Акрамя таго, пры загрузцы старонкі рэсурсу яны ўсе будуць схаваныя.

Калі ж няма ніякага жадання рабіць гэта самому, заўсёды ёсць магчымасць спампаваць скрыпт, які дазваляе стварыць ўсплывальнае акно аўтаматычна, толькі крыху карэктуючы дзеянні праграмы.