Question

所以，我正在尝试整合AngularJS，bootstrap 4以及模态和下拉列表等，我想使用UIBootstrap4。问题出在我的模态上。出现模态时，它没有任何深度或阴影，它占据了屏幕的顶部，将整个内容向下推。

CTRL：

  $scope.openDeleteConditionModal = () => {
    $uibModal.open({
      templateUrl: 'delete-condition-modal.html',
      scope: $scope,
      backdrop: 'static',
      controller: ($uibModalInstance) => {
        $scope.conditionModalClose = () => {
          $scope.modalToggle = () => {
            ctrl.toggleDeleteModal(false);
          };
          $uibModalInstance.close();
        };
      },
    });
  };

是否有可以添加到uiB Modal的标签以使其正常工作？

位于同一目录中的HTML IN delete-condition-modal文件：

<div class="modal fade" id="delete-condition-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-click="toggleDeleteModal()">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="exampleModalLabel">Delete Condition</h4>
            </div>
            <div class="modal-body">
                Condition
                <b>{{NotificationSettingsCtrl.ConditionToBeDeleted.value}}</b> will be deleted.
                <br>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-danger" ng-click="NotificationSettingsCtrl.deleteConditionAttempt( NotificationSettingsCtrl.ConditionToBeDeleted.key, NotificationSettingsCtrl.ConditionToBeDeleted.id)">Delete
                </button>
            </div>
            <div class="modal-footer" ng-show="deleting">
                <i class="fa fa-refresh fa-spin " aria-hidden="true" uib-popover="DELETING TOPIC..." popover-trigger="'mouseenter'"></i>
                Deleting topic
            </div>
        </div>
    </div>
</div>

有关UIBootstrap 4的信息：https://morgul.github.io/ui-bootstrap4/#!#getting_started。

该模式可以完美运行，但其定位和样式完全是疯狂的。不知道如何解决这个问题，我喜欢将15种模式转换为谢谢！

ANGULARJS && UIBootstrap 4模态位置问题

0 个答案: