Модальные окна это просто
За период своей работы я работал с десятком плагинов по созданию модальных окон, почти все из которых были построены на основе jQuery. Но совсем недавно я осознал, что такие окна самому создать, зачастую, проще. Давайте так и сделаем в стиле Angular.
Требования
Хотелось бы создавать окна при помощи следующего HTML кода:
<modal-dialog show='modalShown' width='750px' height='90%'>
<p>Modal Content Goes here<p>
</modal-dialog>И иметь следующий набор функций:
- Открывать и закрывать окно при помощи $scope переменной установив её в true или false (переменная в примере - modalShown)
- Указывать размер окна в пикселях или процентах
- Затемнять оставшуюся часть экрана
- Закрывать кликнув на X в углу окна или за пределами окна
Код директивы
Сама директива довольно проста, с функцией в несколько строк в параметре link. Параметр “show: ‘=’” в отдельной области видимости создает двойную связку между переменной заданной в атрибуте show и переменной show в области видимости. Установка этого параметра в false и true открывает или закрывает окно. Также при открытии мы проверяем параметры height и width и, если они заданы, то выставляем нужные значения. Наконец, метод hideModal() просто устанавливает значение переменной show в false.
app.directive('modalDialog', function() {
return {
restrict: 'E',
scope: {
show: '='
},
replace: true, // Замените на шаблон
transclude: true, // мы хотим вставлять пользовательский контент внутри директивы
link: function(scope, element, attrs) {
scope.dialogStyle = {};
if (attrs.width) {
scope.dialogStyle.width = attrs.width;
}
if (attrs.height) {
scope.dialogStyle.height = attrs.height;
}
scope.hideModal = function() {
scope.show = false;
};
},
template: '...' // Смотрите ниже
};
});Шаблон
Сам шаблон также довольно прост. Обратите внимание на атрибут ng-transclude, он указывает на контейнер для содержимого вашего окна. А атрибут ng-style переводит объект javascript в инлайновый стиль (style) для элемента html.
<div class='ng-modal' ng-show='show'>
<div class='ng-modal-overlay' ng-click='hideModal()'></div>
<div class='ng-modal-dialog' ng-style='dialogStyle'>
<div class='ng-modal-close' ng-click='hideModal()'>X</div>
<div class='ng-modal-dialog-content' ng-transclude></div>
</div>
</div>CSS
Не буду досконально углубляться в CSS. Скажу только одно - работать будет только в современных браузерах. Если вы планируете применять эти стили в браузерах ниже IE9, то потребуется изменить способ центрирования окна.
.ng-modal-overlay {
/* полупорозрачный DIV, который охватывает весь экран */
position:absolute;
z-index:9999;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000000;
opacity: 0.8;
}
.ng-modal-dialog {
/* Отцентрированный даилог с тенью */
z-index:10000;
position: absolute;
width: 50%;
/* Центрирование */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
background-color: #fff;
box-shadow: 4px 4px 80px #000;
}
.ng-modal-dialog-content {
padding:10px;
text-align: left;
}
.ng-modal-close {
position: absolute;
top: 3px;
right: 5px;
padding: 5px;
cursor: pointer;
font-size: 120%;
display: inline-block;
font-weight: bold;
font-family: 'arial', 'sans-serif';
}Открытие и закрытие окна
И, наконец, чтобы завершить пример, нам понадобится добавить совсем немного кода в HTML страницу и контроллер.
<button ng-click='toggleModal()'>Открыть модальный диалог</button>
<modal-dialog show='modalShown' width='750px' height='60%'>
<p>Содержимое модального окна<p>
</modal-dialog>app.controller('MyCtrl', function($scope) {
$scope.modalShown = false;
$scope.toggleModal = function() {
$scope.modalShown = !$scope.modalShown;
};
});Всё вместе
Вот и всё. Автор выложил рабочую версию на JSBin. Усовершенствованный вариант, разместил на GitHub.
