使用css/bootstrap动态弹出窗口

我有一个项目列表，每个项目都可以触发一个弹出窗口（这里的“正常”窗口：http://bootsnipp.com/snippets/00eAd）。我的问题：当我动态添加它们时，它们不会被触发（即：没有任何反应）。我使用的是项目的angular2使用css/bootstrap动态弹出窗口

HTML中的弹出窗口：

<div class="resultitem-overlay container" *ngIf="showOverlayItemOption"> 
     <div class="row"> 
      <div class="col-md-6"> 
       <a href="#_{{ index }}" class="play" data-toggle="modal" data-target="#popup_{{ index }}"></a> 
      </div> 
      <div class="col-md-6"> 
       ... 
      </div> 
     </div> 
    </div>

弹出的HTML：

<div id="popup_{{ index }}" class="modal fade in" role="dialog"> 
     <pm-popup></pm-popup> 
</div>

的{{指数}}北京时间只是一个占位符，并通过指数取代每件物品的真实身份。

CSS：

.modal-dialog { 
    padding: 0px ; 
    position: relative; 
} 
.modal-dialog:before { 
    content: ''; 
    height: 0px; 
    width: 0px; 
    position: absolute; 
    top: 1px; 
    left: -14px; 
    z-index: 99; 
} 

.modal-dialog .close { 
    z-index: 99999999; 
    color: white; 
    text-shadow: 0px 0px 0px; 
    font-weight: normal; 
    top: 4px; 
    right: 6px; 
    position: absolute; 
    opacity: 1; 
} 

.custom-modal-header .modal-title { 
    font-size: 18px; 
} 

.modal-dialog:after { 
    content: ''; 
    height: 0px; 
    width: 0px; 
    position: absolute; 
    top: 1px; 
    right: -14px; 
    z-index: 999999; 
}

它 “作品” 时，我没有使用的HTML ID {{指数}}（即 “弹出”），但这种方式我不能显示的弹出窗口动态。

来源

2016-11-14 Saerdn

你有使用'NG-repeat'？ '{{index}}'只能在'ng-repeat'中使用。 - 为什么不使用开发人员工具简单地检查DOM，正在生成什么值{{index}}。 –

@NikhilNanjappa：我通过ngFor设置{{index}}，并且它被正确插入（至少在DOM中）。但是MatWaligora给出了正确的答案:) – Saerdn

数据目标无法识别字符串插值因此ü需要使用这种结构： [attr.data-target]="'#popup_' + index"

来源

2016-11-14 11:34:42 MatWaligora

Bam！而已！非常感谢你。 – Saerdn

没问题，[attr.aria-whatever]属性也一样:) – MatWaligora

使用css/bootstrap动态弹出窗口

回答

相关问题