Я создаю modal:
var modal = $modal.open({
templateUrl: "/partials/welcome",
controller: "welcomeCtrl",
backdrop: "static",
scope: $scope,
});
есть ли способ увеличить его ширину?
Я использую класс 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;
});
};
Еще один простой способ - использовать 2 готовых размера и передать их в качестве параметра при вызове функции в вашем html. использовать: 'lg' для больших модалов шириной 900 пикселей 'sm' для небольших модалов шириной 300 пикселей или не передавая параметр, вы используете размер по умолчанию, равный 600 пикселей.
пример кода:
$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>
Вы можете указать специальную ширину для класса .modal-lg специально для своего всплывающего окна для более широкого разрешения в области просмотра. Вот как это сделать:
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'
});
Когда мы открываем модальный, он принимает размер как параграф:
Возможные значения для этого размера: 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>
Мне было проще просто взять шаблон из Bootstrap-ui. Я оставил прокомментированный 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>
Измените шаблон диалога (обратите внимание на DIV файлы обертки, содержащие класс "модальный диалог" и класс "модальный контент" ):
<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>
Теперь вы можете добавить любой дополнительный класс, который хотите, или просто изменить размеры ширины и высоты по мере необходимости.
Я включил его в директиву обертки, которая должна быть тривиальной с этой точки вперед.
Приветствия.
Я решил проблему с помощью решения Дмитрия Комина, но с различным синтаксисом 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'
});
Вы можете сделать это очень просто, используя свойство размера angularмодально.
var modal = $modal.open({
templateUrl: "/partials/welcome",
controller: "welcomeCtrl",
backdrop: "static",
scope: $scope,
size:'lg' // you can try different width like 'sm', 'md'
});
существует другой способ, которым вам не нужно перезаписывать классы uibModal и использовать их при необходимости: вы вызываете функцию $uibModal.open с вашим собственным типом размера, например "xlg", а затем вы определяете класс с именем "modal-xlg" "как показано ниже:
.modal-xlg{
width:1200px;
}
вызов $uibModal.open как:
var modalInstance = $uibModal.open({
...
size: "xlg",
});
и это сработает. потому что любая строка, которую вы передаете как загрузочный файл размера, будет связывать его с "модальным", и это будет играть роль класса для окна.
Если вы хотите просто пойти с большим размером по умолчанию, вы можете добавить 'modal-lg':
var modal = $modal.open({
templateUrl: "/partials/welcome",
controller: "welcomeCtrl",
backdrop: "static",
scope: $scope,
windowClass: 'modal-lg'
});