Modal

The modal directive and service allow you to launch modals in a consistent way in SKY UX applications. The bbModal service lauches the modals instead of the UI Bootstrap $uibModal.open, while the bb-modal directive provides a common look-and-feel for modal content. Within the bb-modal directive, you have options to display a common modal header, specify the body content, and display a common modal footer and buttons.

  • bbModal.open — Launches modals in a consistent way in SKY UX applications. Used instead of $uibModal.open. Returns a modal instance, with a result from closing or dismissing a modal.
    • uibModalOptions — Specifies an object with the same options as $uibModal.open that allows for some custom default SKY UX behavior.
    • bbModalOptions(Optional.) Specifies an object that contains SKY UX-specific options for modals.
      • fullPage(Optional.) Indicates whether the modal takes up the entire page. When using a full page modal that has content behind it, you must wrap that content in a bb-page to prevent unneeded scrollbars in the modal. (Default: false)
  • bb-modal — Creates a modal with a common SKY UX look-and-feel.
    • bb-modal-header — Specifies a header for the modal.
      • bb-modal-help-key — Specifies a help key for the modal. A help button in the modal header links to this help key.
    • bb-modal-body — Specifies content to display in the modal's body.
    • bb-modal-footer — Specifies buttons to display in the modal's footer.
      • bb-modal-footer-button — Displays a generic button. You provide HTML within this tag to specify the content of the button. You must register events for the button manually.
      • bb-modal-footer-button-primary — Displays a primary button and applies the btn-primary class to highlight it. "Save" is the default content for the button, but you can provide HTML within this tag to override the default content. You must register events for the button manually.
      • bb-modal-footer-button-cancel — Displays a cancel button to close the modal form. "Cancel" is the default content for the button, but you can provide HTML within this tag to override the default content.

Accessibility

Follow these guidelines to ensure that people using assistive technology or their keyboards can use modals:

  1. When a modal opens, focus should be on the first focusable item in the modal. If the modal does not include focusable items, then focus should be on the modal container element.
  2. While a modal is open, focus should remain on elements in the modal when using Tab key to navigate. Focus should not move back to the initiating page behind the modal.
  3. When a modal closes, focus should return to the element that had focus before the modal opened. Usually this is the element that opened the modal.
  4. To ensure that users can close a modal by pressing the Escape key, do not change the uibModalOptions object’s keyboard option from its default value of true.

Demo

Open full-page modal (separate page)

Markup

<div ng-controller="ModalTestController as modalCtrl">
    <button type="button" class="btn btn-primary" ng-click="modalCtrl.open()">Open standard modal</button>
    <button type="button" class="btn btn-primary" ng-click="modalCtrl.open(true)">
        Open full-page modal
    </button>
    <a class="btn btn-primary" href="../modalfull/">Open full-page modal (separate page)</a>
</div>

<script type="text/ng-template" id="demo/modal/modalform.html">
    <bb-modal>
        <div class="modal-form">
            <bb-modal-header bb-modal-help-key="'bb-security-users.html'">Modal header</bb-modal-header>
            <div bb-modal-body>
                <form>
                    <div class="form-group">
                        <label for="modal-test-input" class="control-label">{{::contentCtrl.textLabel}}</label>
                        <input id="modal-test-input" type="text" class="form-control" autofocus />
                    </div>
                </form>
            </div>
            <bb-modal-footer>
                <bb-modal-footer-button-primary ng-click="contentCtrl.saveModal()"></bb-modal-footer-button-primary>
                <bb-modal-footer-button>Sample button</bb-modal-footer-button>
                <bb-modal-footer-button-cancel></bb-modal-footer-button-cancel>
            </bb-modal-footer>
        </div>
    </bb-modal>
</script>

JavaScript

/* global angular*/
(function () {
    'use strict';

    function ModalTestController(bbModal) {
        var self = this;
        
        self.open = function (fullPage) {
            var modalInstance = bbModal.open(
                {
                    controller: 'ModalContentController as contentCtrl',
                    templateUrl: 'demo/modal/modalform.html'
                }, 
                {
                    fullPage: fullPage
                }
            );

            modalInstance.result.then(
                function (result) {
                    console.log('saved with data:', result);
                },
                function (result) {
                    console.log('dismissed with data:', result);
                });
        };
    }

    function ModalContentController($uibModalInstance) {
        var vm = this;

        function saveModal() {
            $uibModalInstance.close('saved data');
        }

        vm.textLabel = 'Sample text box';
        vm.saveModal = saveModal;
    }

    ModalContentController.$inject = ['$uibModalInstance'];

    ModalTestController.$inject = ['bbModal'];

    angular.module('stache')
    .controller('ModalContentController', ModalContentController)
    .controller('ModalTestController', ModalTestController);

}());