Прехвърляне на прозорци е просто
По време на работата си, съм работил с десетки плъгини за създаване на модалните прозорци, почти всички от които са изградени на базата на JQuery. Но по-скоро, аз осъзнах, че тези прозорци, за да създават, често по-лесно. Да го направим със стил ъглови.
изисквания
Бих искал да се създаде един прозорец със следния HTML код:
И за да има следните функции:
- Отваряне и затваряне на прозореца с променливата $ обхват, като я настроите да вярно или невярно (променливата в примера - modalShown)
- Посочете размера на прозореца в пиксели или процент
- Плавно регулиране на останалата част от екрана
- Затвори, като кликнете върху X в ъгъла на наказателното поле или извън кутията
директива код
Самата директива е доста проста, с функцията на няколко реда в линка на параметъра. Показател "шоу:" = "в отделна зона на видимост създава двойна връзка между променливата е посочено в атрибут шоу променлива и шоу в обхват. Тази опция за невярна и вярно отваря или затваря прозореца. Също така по време на откриването ние проверете настройките на височината, ширината и ако те са дадени, тогава ние излагайте желаните стойности. Накрая, методът hideModal () просто задава стойността на шоуто, за да лъжа.
Аз няма да старателно се рови в CSS. Мога да кажа само едно нещо - ще работи само в модерни браузъри. Ако имате намерение да използвате тези стилове в браузъри IE9, ще трябва да се промени начина, по който центриране прозореца.
Отваряне и затваряне на прозорци
И накрая, за да завърши на примера, ние трябва да добавите съвсем малко код в една HTML страница, както и контролер.
всички заедно
Свързани статии