使用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動態彈出窗口

回答

相關問題