Angular UI modal directive, backdrop missing

前端 未结 5 2124
梦谈多话
梦谈多话 2021-02-15 01:47

I have no backdrop when using the modal directive from UI Bootstrap http://angular-ui.github.io/bootstrap/. The modal itself is working.

I have tried with both the ui-b

相关标签:
5条回答
  • 2021-02-15 02:07

    from Maxisam's link to the pull request: https://github.com/angular-ui/bootstrap/pull/3117

    the easiest fix is simply to add the following CSS:

    html {
      height: 100%;
    }
    
    body {
      min-height: 100%;
    }
    
    .modal-backdrop {
      bottom: 0;
    }
    

    Hopefully it won't break your code :-)

    0 讨论(0)
  • 2021-02-15 02:12

    There is a workaround you can do

    1- add this css class:

    .modal-backdrop{
    bottom: 0;
    position: fixed;
    }
    

    2- make sure the "window.html" template file included "ng-click" event

    <div tabindex="-1" role="dialog" class="modal fade" ng-class="{in: animate}" ng-style="{'z-index': 1050 + index*10, display: 'block'}" ng-click="close($event)">
        <div class="modal-dialog" ng-class="{'modal-sm': size == 'sm', 'modal-lg': size == 'lg'}"><div class="modal-content" modal-transclude></div></div>
    </div>
    
    0 讨论(0)
  • 2021-02-15 02:18

    Sadly, the answer, where bottom:0; is specified is not entirely correct - in some cases it happens (and that's especially true for ui-view router), that there is some empty space left below the backdrop. So, I would suggest just adding the following code:

    .modal-backdrop {
        bottom: -100%;
    }
    

    As the backdrop is added to the body level, it should not break anything and is absolutely guaranteed not to leave any uncovered space below the backdrop.

    0 讨论(0)
  • 2021-02-15 02:21

    Try this PR

    Plunker

    Basically you just need to add one line in directive 'modalWindow'

    angular.element($document[0].querySelectorAll('div.modal-backdrop')).css('height',element[0].scrollHeight + 'px');
    

    and inject $document

    0 讨论(0)
  • 2021-02-15 02:26

    As the docs on angular-ui points out. It supports Bootstrap 3.1.1. So the solution was to downgrade.

    0 讨论(0)
提交回复
热议问题