如何增加模态宽度在角用户界面引导？

小开

最佳答案

I use a css class like so to target the modal-dialog class:

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

Then in the controller calling the modal window, set the 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;
});
};

小开

Another easy way is to use 2 premade sizes and pass them as parameter when calling the function in your html. use: 'lg' for large modals with width 900px 'sm' for small modals with width 300px or passing no parameter you use the default size which is 600px.

example code:

$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;
});
};

and in the html I would use something like the following:

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

小开

I found it easier to just take over the template from Bootstrap-ui. I have left the commented HTML still in-place to show what I changed.

Overwrite their default template:

<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>

Modify your dialog template (note the wrapper DIVs containing "modal-dialog" class and "modal-content" class):

<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>

And then call the modal with whatever CSS class or style parameters you wish to change (assuming you have already defined "app" somewhere else):

<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>

Add an "open" button and fire away.

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

Now you can add whatever extra class you want, or simply change width/height sizes as necessary.

I further enclosed it within a wrapper directive, which is should be trivial from this point forward.

Cheers.

小开

If you want to just go with the default large size you can add 'modal-lg':

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

小开

You can specify custom width for .modal-lg class specifically for your popup for wider viewport resolution. Here is how to do it:

CSS:

@media (min-width: 1400px){


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


}

JS:

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

小开

I solved the problem using Dmitry Komin solution, but with different CSS syntax to make it works directly in browser.

CSS

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

JS is the same:

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

小开

You can do this in very simple way using size property of angular modal.

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

小开

When we open a modal it accept size as a paramenter:

Possible values for it size: 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>

If you want any specific size, add style on model HTML:

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

小开

there is another way wich you don't have to overwrite uibModal classes and use them if needed : you call $uibModal.open function with your own size type like "xlg" and then you define a class named "modal-xlg" like below :

.modal-xlg{
width:1200px;
}

call $uibModal.open as :

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

and this will work . because whatever string you pass as size bootstrap will cocant it with "modal-" and this will play the role of class for window.

小开

Use max-width on modal-dialog for angular 5

.mod-class .modal-dialog {
max-width: 1000px;
}

and use windowClass as others recommended, TS eg:

this.modalService.open(content, { windowClass: 'mod-class' }).result.then(
(result) => {
// this.closeResult = `Closed with: ${result}`;
}, (reason) => {
// this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});

Also, I had to put the css code in global styles > styles.css.