首页 > 其他分享 >Angular 中修改bootstrap的模态框(modal)大小

Angular 中修改bootstrap的模态框(modal)大小

时间:2023-04-30 21:02:17浏览次数:54  
标签:bootstrap class window modal import open Angular


Angular 中修改bootstrap的模态框(modal)大小


Angular 中修改bootstrap的模态框(modal)大小_ng-bootstrap

自己瞎搞改width的后果。。。


看官网文档:https://ng-bootstrap.github.io/#/components/modal/examples

https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/modal/modal.ts


最终解决:


showWarnningModal() {
    this.modalService.open(this.warnningModal, { size: 'lg' }).result.then((result) => {
      if (result === 'OK') {
        // this.loadTopQueueDeliveryOrder();
      }
    }, (reason) => {
      // this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }



import { 
  Injector, 
  ComponentFactoryResolver } 
   from 
  '@angular/core';
 
 
 
import { 
  NgbModalStack } 
  from 
  './modal-stack';
 
 
 
import { 
  NgbModalRef } 
  from 
  './modal-ref';
 
 
 
/**
 
 
* Represent options available when opening new modal windows.
 
 
*/
 
 
export 
  interface 
  NgbModalOptions
 
 
/**
 
 
* Whether a backdrop element should be created for a given modal (true by default).
 
 
* Alternatively, specify 'static' for a backdrop which doesn't close the modal on click.
 
 
*/
 
 
?: 
  boolean 
  | 
  'static';
 
 
 
/**
 
 
* An element to which to attach newly opened modal windows.
 
 
*/
 
 
?: 
  string;
 
 
 
/**
 
 
* Whether to close the modal when escape key is pressed (true by default).
 
 
*/
 
 
?: 
  boolean;
 
 
 
/**
 
 
* Size of a new modal window.
 
 
*/
 
 
?: 
  'sm' 
  | 
  'lg';
 
 
 
/**
 
 
* Custom class to append to the modal window
 
 
*/
 
 
?: 
   string;
 
 
 

  }
 
 
 
/**
 
 
* A service to open modal windows. Creating a modal is straightforward: create a template and pass it as an argument to
 
 
* the "open" method!
 
 
*/
 
 
export 
  declare 
  class 
   NgbModal
 
 
private 
   _moduleCFR;
 
 
 
private 
   _injector;
 
 
 
private 
   _modalStack;
 
 
 
constructor(_moduleCFR
  : 
  ComponentFactoryResolver, _injector
  : 
  Injector, _modalStack
  : 
  NgbModalStack);
 
 
 
/**
 
 
* Opens a new modal window with the specified content and using supplied options. Content can be provided
 
 
* as a TemplateRef or a component type. If you pass a component type as content than instances of those
 
 
* components can be injected with an instance of the NgbActiveModal class. You can use methods on the
 
 
* NgbActiveModal class to close / dismiss modals from "inside" of a component.
 
 
*/
 
 
open(content
  : 
  any, options
  ?: 
  NgbModalOptions)
  : 
  NgbModalRef;
 
 
 

  }

标签:bootstrap,class,window,modal,import,open,Angular
From: https://blog.51cto.com/u_15976398/6238255

相关文章

  • 坑系列 (Angular 2+ ) -> 控制反转C(Inversion of Control)和 依赖注入DI(Dependency
        控制反转IOC和依赖注入DI这两个概念其实有太多优秀的文章,由浅入深,从不同的角度,再到不同的比喻进行了讲解,对于新手的我来说,看完之后,好像看了又没完全看,回头摸索实践,还是总有种似懂非懂,懂了又没完全懂(‘X了又没完全XXX’句式是2021年某个梗嘻嘻......
  • 在使用showModalDialog中为解决刷新时弹出新窗口时用到iframe所带来的一个问题
    问题描述:我们在开发过程中使用showModalDialog来产生一个弹出窗口,而在这个弹出窗口中要做一个刷新,或者是切换到其它的url时会弹出新窗口。为了解决这个问题,网上有个办法是采用iframe,在showModalDialog窗口中使用iframe这样就不会有弹出窗口了,但这样使用又带来了一个小的问题,我们页......
  • angularjs 拖拽实现方案
    最近有一个拖拽排序的功能遍历后无法直接读取index和item。换了一种思路实现功能<!DOCTYPEhtml><htmllang="en"ng-app="myApp"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,......
  • Angular系列 -> 生命周期钩子
    简介:Angular指令的生命周期,是用来记录指令从创建、应用及销毁的过程。Angular提供了一系列与指令生命周期相关的钩子,便于我们监控指令生命周期的变化,并执行相关的操作。生命周期介绍: ngOnChanges:当数据绑定输入属性的值发生变化时;@input属性(输入属性)发生变化时;ngO......
  • 基于HTML5的移动Web应用——Bootstrap 样式案例
     需求说明使用container、row等栅格系统的知识布局网页结构使用表单元素制作登录页面使用btn-success制作“搜索”按钮,用btn-danger制作“登录”按钮运行效果新梦想技术分享参考代码<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><metaname="view......
  • bootstrap css编码规范
    1.1. 语法1.        用两个空格来代替制表符(tab)--这是唯一能保证在所有环境下获得一致展现的方法。2.        为选择器分组时,将单独的选择器单独放在一行。3.        为了代码的易读性,在每个声明块的左花括号前添加一个空格。4.        声明块......
  • bootstrap日期插件datetimepicker的简单使用
    <!DOCTYPEHTML><html><head><linkhref="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css"rel="stylesheet"><linkrel="stylesheet"type="text/cs......
  • Angular系列 -> 父子传值
    1.parenttochild: parent: <app-child[childMessage]="parentMessage"></app-child>child:@Input()childMessage:string;2.childtoparent:@ViewChild:使父组件可以获取到子组件的属性和功能;但是,子组件直到视图初始化完成后才可用,这就意味着我们需要在AfterView......
  • Bootstrap Table表格中存放下拉框,读取数据填充到下拉框
    初学Bootstarp,个人感觉一个功能非常强大的前端框架,由于学习的路途也不是一番风顺的,难免会遇到问题,将遇到的问题整理,可以时常看看,加深记忆。最近做表格需要在表格中加入<select>标签,将数据填充到下拉框,无奈搞了好几个小时也没有成功,最后经过请教身边的大佬,得以解决。代码如下:htt......
  • springboot+bootstraptable
    springboot+bootstraptable项目采用的是springboot+bootstraptable搭建的demo  https://blog.csdn.net/weixin_43373818/article/details/114714016基础的增删改查已经实现html页面<!DOCTYPEhtml><htmllang="zh-CN"xmlns:th="http://www.thymeleaf.org"><......