twitter-bootstrap 是否可以在选项中给出模态的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27147146/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to give the size of the modal in the options
提问by Patan
I am using bootstrap modal to show messages.
我正在使用引导模式来显示消息。
var options = {
backdrop: false,
keyboard: true,
backdropClick: false,
templateUrl: 'a.html',
controller: 'aController',
};
var modalInstance = $modal.open(options);
Is it possible to give the custom width and height style properties.
是否可以提供自定义宽度和高度样式属性。
回答by ryeballar
Yes you can provide a sizekey value(sm, md, lg) which interpolates to .modal-sm, .modal-md and .modal-lg.
是的，您可以提供一个size插入到.modal-sm, .modal-md and .modal-lg.
As stated in the angular-bootstrap documentation:
size - optional size of modal window. Allowed values: 'sm' (small) or 'lg' (large). Requires Bootstrap 3.1.0 or later
size - 模态窗口的可选大小。允许的值：“sm”（小）或“lg”（大）。需要 Bootstrap 3.1.0 或更高版本
Javascript
Javascript
var options = {
backdrop: false,
keyboard: true,
backdropClick: false,
templateUrl: 'a.html',
controller: 'aController',
size: 'lg' // sm, md, lg
};
var modalInstance = $modal.open(options);
If you are not satisfied with the size provided by those values, then you have two options:
如果您对这些值提供的大小不满意，那么您有两个选择：
[1] Add a class to the top level modal window using the windowClassattribute and then use this class to change the respective elements via css child selectors.
[ 1] 使用windowClass属性将一个类添加到顶级模式窗口，然后使用这个类通过 css 子选择器更改相应的元素。
[2] You can also change the template using the windowTemplateUrland override the default template implementation or create one yourself.
[ 2] 您还可以使用windowTemplateUrl和覆盖默认模板实现或自己创建模板来更改模板。
回答by shanzilla
Angular UI Bootstrapapplies a conditional class to each modal based on what string is passed in as a size option to modalInstance.
Angular UI Bootstrap根据传入的字符串作为 modalInstance 的大小选项将条件类应用于每个模态。
<div class="modal-dialog" ng-class="size ? 'modal-' + size : ''">
You can pass in a custom string to create a class in the format modal-[yourSizeString]. Extend the default modal sizes by passing in size: 'xl'or something similar to generate the class modal-xlwhich can be styled with a custom width.
您可以传入自定义字符串以创建格式为 modal-[yourSizeString] 的类。通过传入size: 'xl'或类似的东西来扩展默认模态大小以生成modal-xl可以使用自定义宽度设置样式的类。
JS
JS
myOpenFunc = function () {
var modalInstance = $modal.open({
animation: true,
templateUrl: 'mypage.html',
size: 'xl',
controller: 'myCtrl'
});
};
CSS
CSS
.modal-xl {
width: 1200px;
}
