时间戳

首页 > 解决方案 > Bootstrap + Angular：具有动态图像的模态

angular - Bootstrap + Angular：具有动态图像的模态

问题描述

我是 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";
 }

标签： angularbootstrap-4bootstrap-modal

解决方案

你的 index.html 配置好了吗？它需要 jquery 才能工作

在 index.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>

推荐阅读