ANGULARJS && UIBootstrap 4 Проблема модального положения - PullRequest
Новая
       34

ANGULARJS && UIBootstrap 4 Проблема модального положения

0 голосов
/ 29 ноября 2018

Итак, я пытаюсь интегрировать AngularJS, начальную загрузку 4, модалы, выпадающий список и т. Д. Я хочу использовать UIBootstrap 4. Проблема связана с моими модальностями.Хотя модальное изображение появляется, оно не имеет глубины или тени и занимает верхнюю часть экрана, толкая весь контент вниз.

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 модалей для конвертации в Спасибо !!

...