放在一邊的angularjs ui-bootstrap模態

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>

到這里為止一切正常。 但是現在我想打開模型“ aside”（就像從屏幕右邊一樣），我發現了以下代碼：

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

結合了這個div，它從屏幕右側打開了一個模式

<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行CSS將解決您的問題

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

演示