当前位置: 首页 > 知识库问答 >
问题:

角度2-打开/关闭默认引导模式

蔺山
2023-03-14

我不想使用angular2-bootstrap或ng2-bs3-modal,如问题/答案Angular 2 Bootstrap Modal和Angular 2.0和Modal对话框中所建议的

现在。我知道什么打开和关闭引导模式。

  • 显示在显示:无;显示:块;
  • 之间切换
  • 属性在div上在aria-hidden=“true”aria-hidden=“false
  • 之间切换

因此,我很自然地认为,如果我绑定到aria-hiddit属性,就像So[aria-hiddit]=“true”,那么我就可以操纵它。遗憾的是,我无法绑定到aria-hiddit,因为它不是div的已知属性。(注意,attr.aria-hidding不存在)

我知道使用$('#mymodal').modal()的JQuery可以做到这一点,如本问题所示如何使用JQuery打开引导模式窗口?

所以我的问题是,是否有一个TypeScript功能与JQuery中的modal()相同,或者是否有一种方法将函数/变量绑定到aria-hiddit

我当前的HTML:

<div id="createAccountModal" class="modal fade customForm" role="dialog" [aria-hidden]="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Create account</h4>
            </div>
            <div class="modal-body">
               <p>Lorem ipsum</P>
            </div>
            <div class="modal-footer align-left">
                My custom footer
            </div>
        </div>
    </div>
</div

共有3个答案

壤驷华辉
2023-03-14

我已经这样做了,这对我来说是完美的。

var element=document.getElementByID(“CloseButton”);

element.click();其中我的CloseButton是bootstrap close button

东弘扬
2023-03-14

如果您的模式有一个取消按钮(否则创建一个隐藏的关闭按钮)。您可以在此按钮上模拟click事件,以便关闭窗体。在组件中添加ViewChild

export class HelloComponent implements OnInit {

@ViewChild('fileInput') fileInput:ElementRef;

在关闭按钮中添加#fileinput

<button class="btn btn-danger" #fileInput id="delete-node" name="button" data-dismiss="modal" type="submit">Cancelar</button>

当您想要以编程方式关闭模式时,触发close按钮上的click事件

this.fileInput.nativeElement.click();

要打开,您可以使用相同的想法

韦宏朗
2023-03-14

您可以尝试以下操作,创建mymodal.html:

<div class="modal-backdrop fade in" [style.display]="showModal ? 'block' : 'none'"></div>
  <div class="modal" tabindex="-1" role="dialog" style="display: block" [style.display]="showModal ? 'block' : 'none'">
     <div class="modal-dialog">
        <div class="modal-popup">
          <div class="popup-title">
            <span>{{title}} </span>
            <i class="icon-cancel fr" data-dismiss="modal" aria-label="Close" (click)="cancelAction()"></i>
            <p *ngIf="subTitle">{{subTitle}}</p>
          </div>
        <ng-content></ng-content>
      </div>
  </div>
</div>

然后,创建mymodal.component.ts:

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';

const template: string = require('./myModal.html');

@Component({
   selector: 'modal',
   template
})

export class Modal implements OnInit {
  @Input('show-modal') showModal: boolean;
  @Input('title') title: string;
  @Input('sub-title') subTitle: string;
  @Input('cancel-label') cancelLabel: string;
  @Input('positive-label') positiveLabel: string;

  @Output('closed') closeEmitter: EventEmitter < ModalResult > = new EventEmitter < ModalResult > ();
  @Output('loaded') loadedEmitter: EventEmitter < Modal > = new EventEmitter < Modal > ();
  @Output() positiveLabelAction = new EventEmitter();

  constructor() {}

  ngOnInit() {
    this.loadedEmitter.next(this);
  }

  show() {
    this.showModal = true;
  }

  hide() {
    this.showModal = false;
    this.closeEmitter.next({
      action: ModalAction.POSITIVE
    });
  }

  positiveAction() {
    this.positiveLabelAction.next(this);
    return false;
  }

  cancelAction() {
    this.showModal = false;
    this.closeEmitter.next({
      action: ModalAction.CANCEL
    });
    return false;
  }
}

export enum ModalAction { POSITIVE, CANCEL }

export interface ModalResult {
  action: ModalAction;
}

然后为此创建module,以便您可以在任何地方使用,并像这样在任何地方使用它:

<modal #deleteUserModal id="deleteUser"
   [show-modal]="isModalOpen"
   [title]="'Delete'"
   >
  <div class="popup-content">
    <p>Are you sure you want to delete the user permanently?</p>
  </div>
  <div class="popup-footer">
    <button class="btn cancel"  aria-label="Close" (click)="deleteUserModal.hide()">
        Cancel
    </button>
    <button type="button" class="btn btn-primary" (click)="deleteSelectedUser(deleteUserModal)" aria-label="Close">
        Delete
    </button>
   </div>
 </modal>

您还可以增强此功能:)

 类似资料:
  • 我有一个引导模式对话框,我想首先显示,然后当用户单击页面时,它就消失了。我有以下内容: 最初会显示该模式,但在模式之外单击该模式时不会关闭。此外,内容区域不是灰色的。我如何使模式显示最初,然后关闭后,用户点击该区域以外?我怎样才能让背景像演示一样变灰?

  • 问题内容: 我在引导模态中有一个列表框和一个按钮。单击按钮后,新的按钮将在模态的div内渲染。当我关闭模态并重新打开它时,模态上执行的最后一个操作(如先前呈现的按钮)仍然存在于模态中。 如何重置模态,以便再次打开模态时,按钮不存在,用户可以再次从列表框中选择选项,然后单击按钮以呈现新按钮,依此类推。 -更新- 为什么不起作用? 问题答案: 隐藏模态后,只需手动重置任何内容即可:

  • 我想从缺省的图库中选择文件,如图像,视频,但当我使用下面的函数打开图库时,它也给了我一些不必要的选项来选择文件,如“文件管理器,文件管理器”。这些应用程序安装在我的电话上,我不想要那些应用程序时,我打开和选择媒体文件。 plz帮助

  • 我复制了一个模板从coDepen。这段代码非常过时,有一些旧的cdn链接。这意味着我必须找到这些链接的更新版本。我是如此接近使应用程序完全功能,我需要打开后关闭模式。我相信这和自举有关。链接和模态代码如下。

  • 问题内容: 从使用ReactJS的prop验证功能开始,正如文档所说,出于性能原因,该功能仅在“开发模式”下有效。 React似乎正在验证我注释的特定组件的属性,但我不记得显式打开“开发模式”。 我尝试搜索如何触发/切换开发模式,但是没有任何运气。 问题答案: 对方的回答假设您使用外部预建的文件从反应,而正确的,是大多数人不会如何去或 应该 消耗作出反应,一个包。而且,在这一点上,大多数每个Rea

  • 我试图从实际对话框控制器的视图关闭并重新打开对话框。最终发生的情况是,在对话框关闭/打开后,它不会再次正确关闭。Escape在某些浏览器上工作(但覆盖仍保留),单击背景可能会导致对话框关闭,但覆盖仍保留(取决于浏览器)。 问题:如何从对话框控制器上的函数/按钮/事件关闭/重新打开对话框,以及对话框的关闭是否正常(在转义或单击背景时)。 下面的演示只是一个简单的示例,演示了这个问题,因为我将执行下一