zoukankan      html  css  js  c++  java
  • angular5 open modal

    1. 在component 中打开modal,点击close 关闭modal

    html:

    <div class="modal-header " >
      <h4 class="modal-title">Message</h4>
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">×</span>
      </button>
    </div>
    <div id="modal_content" class="modal-body" [innerHTML]="modal_info">
    
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
    </div>
    

     component:

     backdrop: 'static' : 点击modal 外的空白处,不会关闭modal;
     keyboard: false: 使按ESC 不会关闭modal
    import {Component, OnInit, Input, Output} from '@angular/core';
    import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
    import {NgbModalRef} from '@ng-bootstrap/ng-bootstrap/modal/modal-ref';
    
    @Component({
      selector: 'app-modal-dialog',
      templateUrl: './modal-dialog.component.html',
      styleUrls: ['./modal-dialog.component.css']
    })
    export class ModalDialogComponent implements OnInit {
    
      modal_info: string;
      modalRef: NgbModalRef;
      constructor(public activeModal: NgbActiveModal,
                  private modalService: NgbModal) {
      }
    
      ngOnInit() {
      }
    
      openModal(modal_info: string): void {
        // this.modal_info = modal_info;
    
        // const modalRef = this.modalService.open(ModalDialogComponent);
        this.modalRef = this.modalService.open(ModalDialogComponent, { backdrop: 'static', keyboard: false});
        this.modalRef.componentInstance.modal_info = modal_info;
      }

    2. 将modal做成一个遮罩层,调用modalRef 关闭 modal

    this.modalRef = this.modalService.open(ModalDialogComponent, { backdrop: 'static', keyboard: false}); 
    这行代码能打开一个modal,由于这次是使用modal来制作遮罩层,所以我们不需要在html 中写入任何的html.
    import {Component, OnInit, Input, Output} from '@angular/core';
    import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
    import {NgbModalRef} from '@ng-bootstrap/ng-bootstrap/modal/modal-ref';
    
    @Component({
      selector: 'app-modal-dialog',
      templateUrl: './modal-dialog.component.html',
      styleUrls: ['./modal-dialog.component.css']
    })
    export class ModalDialogComponent implements OnInit {
    
      modal_info: string;
      modalRef: NgbModalRef;
      constructor(public activeModal: NgbActiveModal,
                  private modalService: NgbModal) {
      }
    
      ngOnInit() {
      }
    // 打开一个空的modal,即遮罩层
      openModal(modal_info: string): void {
        // this.modal_info = modal_info;
    
        // const modalRef = this.modalService.open(ModalDialogComponent);
        this.modalRef = this.modalService.open(ModalDialogComponent, { backdrop: 'static', keyboard: false});
        this.modalRef.componentInstance.modal_info = modal_info;
      }
    // 用于在其他component中关于遮罩层
      closeModal(): void {
         this.modalRef.close();
      }
  • 相关阅读:
    rac node1节点侦听地址为127.0.0.1问题
    rac crs节点故障(未解决)
    杂牌设备网络接入引起交换机引起端口翻转的故障
    Impdp导出前准备工作以及主要命令
    查询dba_tables视图tablespaces_name为空的问题
    Expdp导出前准备工作以及主要命令
    带参数的方法解析
    类的无参方法,注释
    类和对象的解析
    二重循环的解析
  • 原文地址:https://www.cnblogs.com/wanthune/p/8973375.html
Copyright © 2011-2022 走看看