Изскачащите прозорци за най-различни цели имат много приложения в уеб изграждането. Те могат да се използват за създаване на различни видове менюта, поставяне на рекламни текстове и графики, подсказки при попълване на сложни формуляри и е удобно самите формуляри да се поставят в прозорци, които не заемат място на страницата. В нашата статия ще намерите описание на начина, по който можете да направите такъв прозорец.
Необходимо е
Основни познания по HTML
Инструкции
Етап 1
изскачащ прозорец, html, скрит слой
Стъпка 2
На много страници в мрежата можете да видите, че изисканите библиотеки от различни JavaScript рамки (jQuery, MooTools, Prototype и др.) Се използват за създаване на изскачащи прозорци в страниците. Всъщност обаче те не са необходими при решаването на този конкретен проблем. Инструментите, налични в Hypertext Markup Language (HTML) и Cascading Style Sheets (CSS), са достатъчни за създаване на изскачащи прозорци. Така създадените прозорци ще работят независимо дали JavaScript е активиран в браузъра на посетителя.
Целият код, който създава изскачащия прозорец, може да бъде поставен на два реда. Първият ред създава връзка, върху която трябва да се щракне, за да се покаже изскачащият прозорец:
Натисни тук!
Тук атрибутът onmouseover на маркера за връзка задава типа курсор на мишката по подразбиране за връзки. Атрибутът onclick указва, че когато се щракне върху връзката, скритият PopUp блок трябва да стане видим.
Вторият ред всъщност е изскачащият прозорец. Слой с изскачащ идентификатор и размера на прозореца, цвета и размера на текста, фона и границата, посочени в атрибута style:
Това е текстът в изскачащия прозорец
По подразбиране не се вижда - това се показва от селектора на дисплея със стойност няма в описанието на стила на слоя.
Всъщност това е всичко, от което се нуждаете, за да създадете изскачащ прозорец - поставете тези два реда между маркерите и вашата страница и той е готов за работа.
Стъпка 3
За да можете да затворите изскачащия прозорец пред маркера, трябва да добавите връзка, която изпълнява обратното действие - скривайки видимия слой с идентификатора PopUp:
близо
Стъпка 4
И ако искате прозорецът да се появи не чрез щракване, а чрез задържане на курсора на мишката, тогава първият ред с връзката трябва да бъде променен по този начин:
преместете мишката тук!
Стъпка 5
Вече сте запознати с принципа и структурата на кода на изскачащия прозорец и дизайнът на външния му вид и съдържанието изцяло зависи от вашите цели и въображение.
