uibModal没有出现在全屏angularjs html5上

时间:2018-06-27 02:02:55

标签: angularjs html5 bootstrap-4 angular-ui-bootstrap

我正在尝试使用angularjs 1.6创建uibModal,但是我的模态始终不会出现在全屏部分。

可能是什么问题?enter image description here

1 个答案:

答案 0 :(得分:0)

这是uibModal实现的示例。

一个控制器函数,用于打开具有指定大小的模态。选项为“ lg”,“ md”,“ sm”。在您的html模板中查看限制模式大小的容器。

https://plnkr.co/edit/IjAdQg9kt8mdMSeDOFsk?p=preview

控制器:

$scope.open = function () {
  $scope.modalInstance = $uibModal.open({
    templateUrl: 'myModalContent.html',
    controller: 'ModalInstanceCtrl',
    size: 'lg'
  });

  $scope.modalInstance.result.then(function (result) {
   console.log(result);
  }, function(err) {console.log(err);});
 };
});

简单的HTML模板:

<script type="text/ng-template" id="myModalContent.html">
 <div class="modal-header">
  <h3 class="modal-title" id="modal-title">I'm a modal!</h3>
  </div>
  <div class="modal-body" id="modal-body">
   <p>body content</p>
  </div>
  <div class="modal-footer">
   <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
   <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
  </div>
</script>