html - 如果我点击图像图标，图标应该是可点击的，弹出窗口[对话框]应该打开以上传新图像

Question

如果我点击图像图标，图标应该是可点击的，弹出窗口[对话框]应该打开以上传新图像... Sample Image for your reference 请帮助我提前谢谢

<div class="d-flex align-items-start summary" style="margin-bottom: 10px;">

                <img src="https://www.bpimaging.com/assets/uploads/2015/02/business-portrait-photography-man.jpg" style="width: 56px;max-height: 56px;clip-path: circle(22px at center);"
                    class="mr-3 d-none d-sm-block" alt="...">
                <i *ngIf="isEditItems"  style="color : white;left: 52px;
                    position: absolute; top: 65px; padding: 3px; background-color: rgb(0, 195, 255); border-radius: 50%;font-size: 12px;"
                    class="fa fa-pencil fa-lg" aria-hidden="true" ></i>

                <div>

                    <div class="summary-details">This is a sample text. You can upload your profile picture here. This
                        will be visible to all clients in your contact information. You can change it again if you
                        want.

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

Answer 1

当你使用 bootstrap 时，对于弹出窗口你可以使用 bootstrap modal..

在您的 html 中进行以下更改，

添加data-toggle="modal"data-target="#myModal"

<img src="https://www.bpimaging.com/assets/uploads/2015/02/business-portrait-photography-man.jpg" style="width: 56px;max-height: 56px;clip-path: circle(22px at center);" class="mr-3 d-none d-sm-block" alt="..." data-toggle="modal" data-target="#myModal">

然后包括以下内容，

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Profile information</h4>
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
          <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">Choose file</label>
  </div>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>

这里有一个工作示例 https://www.bootply.com/fzlrwIyyXK