Създаване на изскачащ прозорец JQuery

Това, което се създаде?

В този урок ще създадем един прост и красив изскачащ прозорец на JQuery. Тя ще бъде подобна на това, което се използва в Twitter. Разбира се, можете да направите стила, който искате.

Какво функционалност ще има прозорец?

• Ние искаме, че тя е в средата на листа на сайта, в своята деривация.
• Трябва да има един бутон, за да "близо", или нещо подобно.
• Когато кликнете извън блока - изскачащ прозорец ще се затвори автоматично.
• Когато се покаже прозорец, страницата трябва да бъдат обхванати от една сянка, така че потребителят да може да се съсредоточи върху.

Да започнем да се развива

За изпълнение на изскачащия прозорец ние използваме CSS и няколко реда код JQuery, добре, не е нужно да HTML. Имайте предвид, че за реализацията на идеите ни не се нуждаят от приставки и допълнителни инструменти, много е лесно и безопасно!

Създаване на линк към определен клас и блок Разделение с същ идентификационен номер. Ето как:

Обърнете внимание на името на заданието за клас и номер Разделение блок има една и съща стойност. Това е за свързване на тези елементи. Преди да преминем към писането JQuery код, добавя някои CSS стилове за прозореца.

JQuery прозорец код изскачащ

За да започнете, свържете библиотека файл, JQuery. След това, ние се инициализира JQuery и добавете Разделение #blackout в тялото на документа. Също така се определят ширината на изскачащия прозорец.

На следващо място, се създаде функция, която се центрира прозореца. По-рано, ние сме създали абсолютно позициониране в CSS, не можем да използваме марж: 0px автомобил; ние трябва да се определи ширината на екрана, за да отнеме от тази на ширината на изскачащия прозорец и всичко е разделено на 2. Височината е текущото състояние на книгата, плюс някъде 150px.

Малко по-рано ние създадохме #blackout Разделение, е да се покрият съдържанието на сянка страница. Сега трябва да се уверите, че това устройство ще разполага с ширина и височина от един и същи монитор. Той също така се изчислява в тази функция.

Тази функция трябва да се изпълнява 3 пъти. Когато потребителят използва превъртане, когато потребителят преоразмерява прозореца и първоначално при зареждането на страницата.

На тази sozdaniepopup najQuery кутия завърши! Ние не трябва да изтеглите плъгини и пишат сложни функции, само няколко реда код. Щракнете върху "Демо", за да видите как тя работи. Можете също така да изтеглите изходния код и да видим как тя работи локално на вашия компютър.

Демо изтеглите изходния код (0 Mb).