Модальні вікна це просто
За період своєї роботи я працював з десятком плагінів зі створення модальних вікон, майже всі з яких були побудовані на основі jQuery. Але зовсім недавно я усвідомив, що такі вікна самому створити, найчастіше, простіше. Давайте так і зробимо в стилі Angular.
вимоги
Хотілося б створювати вікна за допомогою наступного HTML коду:
І мати наступний набір функцій:
- Відкривати і закривати вікно за допомогою $ scope змінної встановивши її в true або false (змінна в прикладі - modalShown)
- Вказувати розмір вікна в пікселях або відсотках
- Затемнювати решту екрана
- Закривати клікнувши на X в кутку вікна або за межами вікна
код директиви
Сама директива досить проста, з функцією в кілька рядків в параметрі link. Параметр "show: '='" в окремій області видимості створює подвійну зв'язку між змінної заданої в атрибуті show і змінної show в області видимості. Установка цього параметра в false і true відкриває або закриває вікно. Також при відкритті ми перевіряємо параметри height і width і, якщо вони задані, то виставляємо потрібні значення. Нарешті, метод hideModal () просто встановлює значення змінної show в false.
Не буду детально заглиблюватися в CSS. Скажу тільки одне - працювати буде тільки в сучасних браузерах. Якщо ви плануєте застосовувати ці стилі в браузерах нижче IE9, то буде потрібно змінити спосіб центрування вікна.
Відкриття та закриття вікна
І, нарешті, щоб завершити приклад, нам знадобиться додати зовсім небагато коду в HTML сторінку і контролер.