Bootstrap + Angular: модальный с динамическим c изображение - PullRequest
Новая
       30

Bootstrap + Angular: модальный с динамическим c изображение

0 голосов
/ 20 февраля 2020

Я новичок в Boostrap и пытаюсь открыть модал с изображением внутри. https://getbootstrap.com/docs/4.4/components/modal

Дело в том, что у меня много изображений на моей странице, и я не хочу делать по одному модалу для каждого изображения. Поэтому я попытался загрузить их динамически.

Теперь, когда я нажимаю на изображение, ничего не появляется, но в инспекторе я ясно вижу, что модал там, хотя и полностью прозрачный. Есть идеи о том, что я сделал неправильно? Спасибо!

Для этого вот что я сделал:

вещь. html

[...] // Below the <img> tag that i want to click on
<img src="../../assets/img/photosloc/photo.jpg" class="card-img-top" (click)='showModal(".the/path/to/the/photo.jpg")'>
[...]//Below my modal that should pop
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" >
  <div class=" modal-dialog-centered" role="document">
    <div class="modal-content">

      <div class="modal-body">
        <img class="modal-content" id="modalImg">
      </div>

    </div>
  </div>
</div>

вещь .component.ts 

constructor(private modalService: NgbModal) { }
  modal: any;
  modalImg : any;
  span : any;

  ngOnInit() {
    this.modal = document.getElementById("myModal");
    this.modalImg = document.getElementById("modalImg");
    this.span = document.getElementById("close");
  }
showModal(imgPath) {
    console.log(imgPath); 
    this.modal.style.display = "block";
    this.modalImg.src = imgPath;
  }

 closeModal(){
   this.modal.style.display = "none";
 }

1 Ответ

0 голосов
/ 20 февраля 2020

у вас есть индекс. html хорошо настроен? для работы

в индексе требуется jquery. html

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
...