3

I would like to open a modal inside a modal with backdrop like - backdrop -> window -> backdrop -> window

How can I achieve that with angular foundation?

http://madmimi.github.io/angular-foundation/

thanks!

Stephan Muller
  • 27,018
  • 16
  • 85
  • 126
alonn24
  • 238
  • 2
  • 15

2 Answers2

1

angular-foundation does not support modal inside another modal. The z-index values are hardcoded.

There is a solution that replaces modal, but that was not a fit for us. http://foundation.zurb.com/docs/components/reveal.html

I implemented a directive to do that (typescript)-

export function ModalPositionHelper($modalStack):ng.IDirective {
    var initialModalZIndex = 1005;
    return {
        restrict: 'A',
        link: function (scope) {
            scope.$watch(function () {
                return $modalStack.getTop();
            }, function (newModal, oldModal) {
                if (oldModal) {
                    oldModal.value.modalDomEl.css('z-index', initialModalZIndex);
                }
                if (newModal) {
                    newModal.value.modalDomEl.css('z-index', initialModalZIndex + 2);
                    angular.element('.reveal-modal-bg').css('z-index', initialModalZIndex + 1);
                }
            });
        }
    };
}

Basically I watch the $modalStack.getTop() and change it's z-index.

alonn24
  • 238
  • 2
  • 15
0

There is no good user experience that could come of this. Reconsidering your approach would be better than double-modal. Some fixes are not code related.

lakewood
  • 607
  • 1
  • 5
  • 21