Модальность начальной загрузки ng2 не может быть закрыта, если функция onclick не находится на кнопке

Я пытаюсь реализовать страницу со списком элементов. При нажатии на каждый элемент будет запущен модальный модуль ng2-bootstrap для отображения подробной информации об элементе. Но я обнаружил проблему, когда пытаюсь использовать (click)="lgModal.show()" вне кнопки. Modal нельзя закрыть, щелкнув за пределами оверлея или нажав маленькую кнопку x (крестик). Единственный способ закрыть модальное окно — нажать клавишу «Escape». Вот пример кода:

<li (click)="lgModal.show()" *ngFor="let item of Items"> {{ item }}
    <div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" (click)="lgModal.hide()" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">Large modal</h4>
                </div>
                <div class="modal-body">
                    ...
                </div>
            </div>
        </div>
    </div>
</li>

Есть ли способ, которым я могу уйти с этой кнопкой и переместиться (onclick) за пределы кнопки. Большой модальный


typescript javascript angular ng2-bootstrap
person NewJake    schedule 09.01.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно добавить атрибут data-dismiss

Заменять

<button type="button" class="close" (click)="lgModal.hide()" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>\

с

<button type="button" class="close" (click)="lgModal.hide()" aria-label="Close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                    </button>
person Ankit Agarwal    schedule 09.01.2017
comment
у меня не работает... до сих пор не могу закрыть модальное окно. - person NewJake; 09.01.2017
comment
Вы можете сделать для этого plunkr или jsfiddle? - person Ankit Agarwal; 09.01.2017