R3L R3L - 24 days ago 7
CSS Question

Use dynamic popups with css / bootstrap

I have a list of items and every item can trigger a popup (the "normal" one from here: http://bootsnipp.com/snippets/00eAd).
My problem: When I add them dynamically, they won't fire (i.e.: Nothing happens). I'm using the popups within angular2

HTML of item:

<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 of popup:

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


The {{ index }} ist just a placeholder and is replaced by the index of each item to get a real 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;
}


It "works" when I use the html id without {{index}} (i.e. "popup") but that way I can't show the popups dynamically.

Answer

Data target does not recognize string interpolation therefore u need to use this construction: [attr.data-target]="'#popup_' + index"