Interacting with content behind Bootstrap popup

I am using Angular UI Bootstrap in an AngularJS project for modal popups.

The modal has a parent div like this:

<div tabindex="-1" role="dialog" class="modal fade ng-isolate-scope responsiveModal in" ng-class="{in: animate}" ng-style="{'z-index': 1050 + index*10, display: 'block'}" ng-click="close($event)" modal-window="" window-class="responsiveModal" index="0" animate="animate" style="z-index: 1050; display: block;">


This parent container spans the entire screen and prevents the user from interacting with elements next to or below the modal. Is there a way to change this?

I have also tried 'backdrop: false,'

in modal options.


source to share

1 answer

Without modification of the Bootstrap, . If you're willing to do this, then yes, but it won't be easy.

I think it is imperative that a modal view, by definition, block input outside of itself until the user interacts with it. If you want them to be able to interact with other things while it's up, that's not modal. This is a pop-up window. This is why they don't have anything suitable for interaction outside of the modal.



All Articles