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();
      }
  • 相关阅读:
    R语言数据读入函数read.table
    R语言最小浮点数
    R语言randomForest包实现随机森林——iris数据集和kyphosis数据集
    R语言 rwordseg包的下载
    R语言AMORE包实现BP神经网络——German数据集
    R语言清除内存,无法分配大小为324.5 Mb的矢量
    R语言多重共现性的检测
    Machine Learning for hackers读书笔记(六)正则化:文本回归
    Machine Learning for hackers读书笔记(五)回归模型:预测网页访问量
    完整的Django入门指南学习笔记4
  • 原文地址:https://www.cnblogs.com/wanthune/p/8973375.html
Copyright © 2011-2022 走看看