html - 通过 css/bootstrap 使用动态弹出窗口

Question

我有一个元素列表，每个元素都可以触发弹出窗口(此处的“正常”元素:http://bootsnipp.com/snippets/00eAd)。我的问题:当我动态添加它们时，它们不会触发(即:没有任何反应)。我在 angular2 中使用弹出窗口

元素的 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>

{{ index }} 只是一个占位符，由每个元素的索引替换以获得真实的 id。

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;
 }

当我使用不带 {{index}} 的 html id(即“弹出窗口”)时它“有效”，但那样我就无法动态显示弹出窗口。

Answer 1

数据目标无法识别字符串插值，因此您需要使用以下结构: [attr.data-target]="'#popup_' + index"