angularjs ui-bootstrap modal в стороне

Question

Я использовал пример https://angular-ui.github.io/bootstrap/ для модального, и все отлично работает.

с этим кодом, я могу открыть модальное как в примере:

$scope.open = function (size) { 

    var modalInstance = $uibModal.open({ 
     animation: true, 
     templateUrl: '/resources/views/pages/tasks/edit.html', 
     size: size, 

    }); 

    modalInstance.result.then(function (selectedItem) { 
     $scope.selected = selectedItem; 
    }, function() { 
     $log.info('Modal dismissed at: ' + new Date()); 
    }); 
}; 

для/гашетку я использую это:

<button type="button" class="btn btn-default" ng-click="open()">Open me!</button> 

до здесь все работает отлично. Но теперь я хочу, чтобы открыть модель «в стороне» (например, справа от моего экрана) я нашел этот код:

<button class="btn white active" 
      data-toggle="modal" 
      data-target="#task_modal" 
      ui-toggle-class="modal-open-aside" 
      ui-target="body" > 
</button> 

в сочетании йота это Див открывает модальный из правой части экрана

<div class="modal fade inactive ng-scope " id="task_modal" data-backdrop="false" style="display: none;"> 
    <div class="right white b-l col-md-8"> 

    </div> 
</div> 

Единственная проблема, со вторым примером, я не могу установить каждую опцию; как клавиатура: true и закрыть модель на фоновом клике.

Я много искал решение, но каждый сайт дает примеры, требующие «дополнительных» плагинов. и я думаю, что это должен быть способ исправить это без плагинов.

может кто-то помочь?

Answer 1

Это 2 линии УСС будет решить вашу проблему

.modal.fade:not(.in) .modal-dialog { 
     -webkit-transform: translate3d(25%, 0, 0); 
     transform: translate3d(25%, 0, 0); 
    } 

Demo