如何打开模态并在模态

时间:2016-05-17 14:52:45

标签: javascript jquery twitter-bootstrap iframe angular

我的应用程序中有一个模态,目前使用bootsrap打开:

<div class="modal full-page fade" tabindex="-1" role="dialog" id="fullpageModal">
    <div class="full-page-content">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
         <iframe src="http://www.example.com/id/1"></iframe>

在我的HTML中,我有一个附加到功能的按钮:

<button (click)="initPlay(2)" data-toggle="modal" data-target="#fullpageModal" >PLAY</button>

目前bootstrap打开模态,Angular处理点击。

需要做的是:

  1. 用户点击按钮
  2. 根据点击的按钮
  3. 更新iFrame URL src
  4. 模态可见。
  5. 我认为我需要做的是:

    1. 从bootstrap中移除模态的开口并将其交给Angular2
    2. 在按钮上单击该功能会更新iframe src
    3. 然后该函数打开模态(或将其交回Bootstrap?)
    4. 我的问题:

      1. 更新iframe src的最佳方法是什么?也许要包含一个变量:{{iframeSrc}}并在点击后更新它?

      2. 处理模态开放的最佳方法是什么?

      3. 谢谢!

1 个答案:

答案 0 :(得分:0)

事实证明这很简单。

我创建了两个函数:

initPlay(id) {
    this.iframeSrc = "http://example.com/game/" + id;
}

clearPlay() {
    this.iframeSrc = "";
}

我离开bootstrap来管理模态打开和关闭,并简单地使用Angular2(click)方法来启动src更改。

我添加了一个&#34; loading&#34; iframe的类,表示正在进行操作。

多数民众赞成。