时间戳

首页 > 解决方案 > 如何从打字稿文件打开引导弹出模型

javascript - 如何从打字稿文件打开引导弹出模型

问题描述

我正在开发 Angular 项目，当我function被调用时启动弹出模型。我在 w3schools 上找到了示例，但这具有html打开它的所有逻辑。

我想在调用函数ts时从文件中打开它。openPopup()

从给定链接弹出模型html代码。

<body>
<div class="container">

  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">         
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
      </div>
    </div>
  </div>
  
</div>
</body>

这是打开弹出窗口的按钮

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>

如何将此代码替换为ts文件事件？

标签： javascripthtmlangulartypescripttwitter-bootstrap

解决方案

像这样创建一个变量。并从模态中删除切换元素。

// in ts
 openModal: false;

//then in button click event:

  <button (click)="openModalClick()"></button>
 //in ts:

  openModalClick(){
  openModal=!openModal;
 }
 //in html
<div class="modal fade" id="myModal" *ngIf="openModal">

</div>

这将以 ts 方式工作，如果您想使用引导程序进行切换，则选择带有 id 的按钮并使用 java 脚本 .click()。

推荐阅读