angularjs ui-bootstrap modal in aside

angularjs ui-bootstrap modal in aside

本文关键字：aside in modal ui-bootstrap angularjs      更新时间：2023-09-26

我用了 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，它从屏幕右侧打开一个模态

<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并在背景单击时关闭模型。

我搜索了很多解决方案，但每个站点都提供了需要"更多"插件的示例。 我认为一定是一种在没有插件的情况下解决此问题的方法。

有人可以帮忙吗？

这 2 行 css 将解决您的问题

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

演示

相关文章：