Как увеличить модульную ширину в Угловом UT Bootstrap?

Question

Я создаю модальность:

var modal = $modal.open({ 
        templateUrl: "/partials/welcome", 
        controller: "welcomeCtrl", 
        backdrop: "static", 
        scope: $scope, 
       }); 

есть способ увеличить его ширину?

Answer 1

Я использую класс CSS, как так предназначаться модальным-диалогом класса:

.app-modal-window .modal-dialog { 
    width: 500px; 
} 

Затем в контроллере вызывающего модальное окна, установите windowClass:

$scope.modalButtonClick = function() { 
     var modalInstance = $modal.open({ 
      templateUrl: 'App/Views/modalView.html', 
      controller: 'modalController', 
      windowClass: 'app-modal-window' 
     }); 
     modalInstance.result.then(
      //close 
      function (result) { 
       var a = result; 
      }, 
      //dismiss 
      function (result) { 
       var a = result; 
      }); 
    }; 

Answer 2

Другим простым способом является использовать 2 готовых размера и передать их в качестве параметра при вызове функции в вашем html. использование: 'lg' для больших модалов с шириной 900px 'sm' для маленьких модалов с шириной 300px или без какого-либо параметра вы используете размер по умолчанию 600px.

пример кода:

$scope.openModal = function (size) { 
var modal = $modal.open({ 
       templateUrl: "/partials/welcome", 
       controller: "welcomeCtrl", 
       backdrop: "static", 
       scope: $scope, 
       size: size, 
      }); 
modal.result.then(
     //close 
     function (result) { 
      var a = result; 
     }, 
     //dismiss 
     function (result) { 
      var a = result; 
     }); 
}; 

и в HTML Я хотел бы использовать что-то вроде следующего:

<button ng-click="openModal('lg')">open Modal</button> 

Answer 3

я нашел, что легче просто взять шаблон из Bootstrap-интерфейса. Я оставил прокомментированный HTML еще на месте, чтобы показать, что я изменил.

Переписать их шаблон по умолчанию:

<script type="text/ng-template" id="myDlgTemplateWrapper.html"> 
    <div tabindex="-1" role="dialog" class="modal fade" ng-class="{in: animate}" 
     ng-style="{'z-index': 1050 + index*10, display: 'block'}" ng-click="close($event)"> 
     <!-- <div class="modal-dialog" 
      ng-class="{'modal-sm': size == 'sm', 'modal-lg': size == 'lg'}" 
      > 
      <div class="modal-content" modal-transclude></div> 
     </div>--> 

     <div modal-transclude> 
      <!-- Your content goes here --> 
     </div> 
    </div> 
</script> 

Измените шаблон диалога (обратите внимание на DIVs оболочки, содержащие "модальный-диалог" класса и "модальный-контент" класс):

<script type="text/ng-template" id="myModalContent.html"> 
    <div class="modal-dialog {{extraDlgClass}}" 
     style="width: {{width}}; max-width: {{maxWidth}}; min-width: {{minWidth}}; "> 
     <div class="modal-content"> 
      <div class="modal-header bg-primary"> 
       <h3>I am a more flexible modal!</h3> 
      </div> 
      <div class="modal-body" 
       style="min-height: {{minHeight}}; height: {{height}}; max-height {{maxHeight}}; "> 
       <p>Make me any size you want</p> 
      </div> 
      <div class="modal-footer"> 
       <button class="btn btn-primary" ng-click="ok()">OK</button> 
       <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
      </div> 
     </div> 
    </div> 
</script> 

А потом вызовите модальный код с любыми параметрами CSS или стилем, которые вы хотите изменить (при условии, что вы уже определили «приложение» в другом месте):

<script type="text/javascript"> 
    app.controller("myTest", ["$scope", "$modal", function ($scope, $modal) 
    { 
     // Adjust these with your parameters as needed 

     $scope.extraDlgClass = undefined; 

     $scope.width = "70%"; 
     $scope.height = "200px"; 
     $scope.maxWidth = undefined; 
     $scope.maxHeight = undefined; 
     $scope.minWidth = undefined; 
     $scope.minHeight = undefined; 

     $scope.open = function() 
     { 
      $scope.modalInstance = $modal.open(
      { 
       backdrop: 'static', 
       keyboard: false, 
       modalFade: true, 

       templateUrl: "myModalContent.html", 
       windowTemplateUrl: "myDlgTemplateWrapper.html", 
       scope: $scope, 
       //size: size, - overwritten by the extraDlgClass below (use 'modal-lg' or 'modal-sm' if desired) 

       extraDlgClass: $scope.extraDlgClass, 

       width: $scope.width, 
       height: $scope.height, 
       maxWidth: $scope.maxWidth, 
       maxHeight: $scope.maxHeight, 
       minWidth: $scope.minWidth, 
       minHeight: $scope.minHeight 
      }); 

      $scope.modalInstance.result.then(function() 
      { 
       console.log('Modal closed at: ' + new Date()); 
      }, 
      function() 
      { 
       console.log('Modal dismissed at: ' + new Date()); 
      }); 
     }; 

     $scope.ok = function ($event) 
     { 
      if ($event) 
       $event.preventDefault(); 
      $scope.modalInstance.close("OK"); 
     }; 

     $scope.cancel = function ($event) 
     { 
      if ($event) 
       $event.preventDefault(); 
      $scope.modalInstance.dismiss('cancel'); 
     }; 

     $scope.openFlexModal = function() 
     { 
      $scope.open(); 
     } 

    }]); 
</script> 

Добавить кнопку «открыть» и свернуть.

<button ng-controller="myTest" class="btn btn-default" type="button" ng-click="openFlexModal();">Open Flex Modal!</button> 

Теперь вы можете добавить любой дополнительный класс, который хотите, или просто изменить размеры по ширине и высоте по мере необходимости.

Я также вложил его в директиву обертки, которая должна быть тривиальной с этой точки вперед.

Cheers.

Answer 4

Если вы хотите просто идти с большим размером по умолчанию в вы можете добавить «модальный-LG»:

var modal = $modal.open({ 
      templateUrl: "/partials/welcome", 
      controller: "welcomeCtrl", 
      backdrop: "static", 
      scope: $scope, 
      windowClass: 'modal-lg' 
}); 

Answer 5

Вы можете задать ширину бумаги для .modal-Л.Г. класса специально для всплывающего окна для более широкого разрешения видового экрана ,Вот как это сделать:

CSS:

.my-modal-popup{ 

    @media (min-width: 1400px){ 

     .modal-lg { 
      width: 1308px; 
     } 
    } 

} 

JS:

var modal = $modal.open({ 
    animation: true, 
    templateUrl: 'modalTemplate.html', 
    controller: 'modalController', 
    size: 'lg', 
    windowClass: 'my-modal-popup' 
}); 

Answer 6

Я решил проблему с помощью решения Дмитрия Комин, но с другим синтаксисом CSS, чтобы сделать это работает непосредственно в браузере ,

CSS

@media(min-width: 1400px){ 
    .my-modal > .modal-lg { 
     width: 1308px; 
    } 
} 

JS тот же:

var modal = $modal.open({ 
    animation: true, 
    templateUrl: 'modalTemplate.html', 
    controller: 'modalController', 
    size: 'lg', 
    windowClass: 'my-modal' 
}); 

Answer 7

Вы можете сделать это очень простым способом, используя размер свойства углового модальным.

var modal = $modal.open({ 
        templateUrl: "/partials/welcome", 
        controller: "welcomeCtrl", 
        backdrop: "static", 
        scope: $scope, 
        size:'lg' // you can try different width like 'sm', 'md' 
       }); 

Answer 8

Когда мы открываем модальный он принимает размер как paramenter:

Возможные значения для него размер: sm, md, lg

$scope.openModal = function (size) { 
var modal = $modal.open({ 
     size: size, 
     templateUrl: "/app/user/welcome.html", 
     ...... 
     }); 
} 

HTML:

<button type="button" 
    class="btn btn-default" 
    ng-click="openModal('sm')">Small Modal</button> 

<button type="button" 
    class="btn btn-default" 
    ng-click="openModal('md')">Medium Modal</button> 

<button type="button" 
    class="btn btn-default" 
    ng-click="openModal('lg')">Large Modal</button> 

Если вы нужен какой-то конкретный размер, добавьте стиль в HTML:

<style>.modal-dialog {width: 500px;} </style> 

Answer 9

есть еще один способ которым вы не должны переписывать uibModal классов и использовать их, если это необходимо: вы вызвать функцию $ uibModal.open с вашим собственным типом размера, как «XLG», а затем вы определяете класс с именем "модальный-XLG", как показано ниже:

.modal-xlg{ 
    width:1200px; 
} 

вызов $ uibModal.open как:

var modalInstance = $uibModal.open({ 
       ... 
       size: "xlg", 
      }); 

и это будет работать. , потому что любая строка, которую вы передаете в качестве начальной загрузки, будет связывать ее с «модальным», и это будет играть роль класса для окна.