点击更新图片按钮无法唤起exampleModal2模态框问题咨询

问题根因 #

你提供的代码中，第一个id为exampleModal的模态框缺少对应的闭合</div>标签，导致exampleModal2被直接嵌套在了exampleModal的内部DOM结构中。Bootstrap模态框默认处于隐藏状态，嵌套在内部的第二个模态框自然无法被正常触发弹出。

修复方案 #

• 在exampleModal的modal-dialog闭合标签后补充exampleModal自身的闭合</div>标签，让两个模态框成为平级DOM节点
• 顺带修正两个模态框重复的标题ID问题，避免语义冲突（可选，但符合HTML规范）

修正后的完整代码片段 #

<br>
<br>
{{Uid}}
<div class="container">
  <article class="uk-comment">
    <header class="uk-comment-header">
      <div class="uk-grid-medium uk-flex-middle" uk-grid>
        <div class="uk-width-auto">
          <img class="uk-comment-avatar" [src]="dataProfile.image" width="200" height="200" alt="">
        </div>

        <div class="uk-width-expand">
          <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="/profi">{{dataProfile.firstName}}</a>
          </h4>
          <button class="btn btn-info" data-bs-toggle="modal" data-bs-target="#exampleModal">update</button>
          <button class="btn btn-info" data-bs-toggle="modal" data-bs-target="#exampleModal2">update image</button>

        </div>
      </div>
    </header>
    <div class="uk-comment-body">
      <p>{{dataProfile.bio}}</p>
    </div>

  </article>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <input type="text" name="firstName" [(ngModel)]="dataProfile.firstName" >
          <input type="text" name="bio" [(ngModel)]="dataProfile.bio">
          <p class="alert alert-success" *ngIf="successUpdate">{{successUpdate}}</p>
          <button class="btn btn-success" (click)="update()">update now</button>
        </form>

      </div>
      <div class="modal-footer">

      </div>
    </div>
  </div>
<!-- 补充第一个模态框的闭合标签 -->
</div>

<div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModal2Label" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <!-- 修正第二个模态框的标题ID，和aria-labelledby属性对应 -->
        <h5 class="modal-title" id="exampleModal2Label">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
         <input type="file" accept=".jpg , .png" (change)="uploadImage($event)">
          <button class="btn btn-success" (click)="updateImage()">update now </button>
        </form>

      </div>
      <div class="modal-footer">

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

内容的提问来源于stack exchange，提问作者Yass Ess