CODEWITHSUNDEEP
angularjsmodal-dialogzurb-foundationangular-foundation
alonn24
alonn24

Reputation: 238

How do I open modal inside a modal with proper backdrop with angular foundation?

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!

Upvotes: 3

Views: 425

Answers (2)

lakewood
lakewood

Reputation: 607

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.

Upvotes: 0

alonn24
alonn24

Reputation: 238

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.

Upvotes: 1

Related Questions