Прехвърляне на прозорец на Jquery
Уеб хостинг Оценка: 8 от 10 с 325 Оценки
Как да си направим модален (поп-нагоре) прозорец на Jquery
За тези, които искат да видят работата на модален прозорец, кликнете върху бутона за изтегляне урок:
Прехвърляне на прозорец към вашия сайт може да се направи много бързо. За да направите това, ние ще вземем две библиотеки: Jquery и BPopup плъгин. Jquery библиотека и плъгин BPopup е с отворен код продукт, което означава, че сте свободни да ги използва за собствените си нужди.
Също така, за да се създаде един изскачащ прозорец за вашия сайт, ние ще създадем три файла: index.html, main.js и style.css.
index.html - това е основната ни файл, в който ние ще наложи изскачащ прозорец, както и други елементи.
main.js - това е логиката на модален прозорец
style.css - тук пишем основните стилове за модален прозорец
Файлът index.html
index.html файла и ние закачен Bpopup Jquery библиотека. Тогава main.js.
Ето, аз ще направя един важен момент: ако използвате JQuery библиотека, трябва да го е участвал е първият, и едва след това друг JS файл, в противен случай си модален прозорец няма да работи.
main.js файл
писахме три функции в main.js файл: bclose (), bopen (), setTimeout в document.ready блок.
bclose () - функция затваряне модален прозорец, когато кликнете върху "Close"
bopen () - функция, както вероятно се досещате, показва модален прозорец, когато кликнете върху "прозореца CALL модален" бутона
Unit $ (документ) .ready - означава, че ние изпълнение на код вътре в блока, само когато всички DOM елементи на страницата ще се изтегли
setTimeout функция - дава възможност за извършване на метода със закъснение. Ние сме това забавяне е настроен на 1 секунда = (1000ms)
VK.Widgets.Group (.) Както може би се досещате, е необходимо да се зареди джаджа Vkontakte в модален прозорец
$ ( "# Popup_vk") bPupub () -. Причина ни изскачащ прозорец
style.css файла
Файлът style.css, ние си поставихме за стила на модалните прозорци и бутони.
Както можете да видите, за да направи друг вид транспорт (поп-нагоре) прозорец за вашия уеб сайт е много проста. Изтегляне на примерен можете да следвате този линк. След като го изтеглите пробата, трябва да разархивирате и стартирате index.html на файла. Ако имате някакви въпроси, да ги попитам и ние ще се радваме да отговорим.
Присъединете се към нашата група VK и очаквайте нови материали.
Достъпът до личната зона на този сайт
Свързани статии