Как динамически создать правильную модель функционирования, используя скриптлет?

Question

Попытка заполнить данные в форме modal.Также попытался поместить код modal в цикл for-each, и он отлично работает при отображении деталей в modal, но close button и нажатие вне modal не работает для close modal,Согласно исследованиям, следует поместить modal вне контейнера div, поместить model, но теперь он не работает вообще.Пожалуйста, помогите мне в этом.

HTML код:

<% var id %>
<div class="row" >
    <% users.forEach(function(user){ %>
        <div class="col-md-4">
           <% id = user.userid %>
           <div class="card h-100 justify-content-center">
               <img src="<%= '/uploads/' + user.picpath %>" class="img-thumbnail">
               <div class="caption">
                   <h4><%= user.fname + ' ' + user.lname %></h4>
               </div>
               <p>
                   <button class="myBtn btn btn-primary" data-toggle="collapse" data-target="#myModal<%= id %>">Details</button>
               </p>
           </div>
       </div>
    <% }); %>
</div>

<!-- Modal -->
<div class="modal" id="myModal<%= id %>" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle"><%= user.fname + ' ' + user.lname %></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Answer 1

Как уже упоминалось выше, у вас есть несколько проблем в вашем коде

1. data-toggle Значение атрибута кнопки, которую вы используете для открытия модального окна, должно быть modal вместо collapse.
2. Ваш модальный код ожидает идентификатор и пользователя, в этом случае идентификатор всегда будет идентификатором последнего пользователя, а пользователь будет undefined, так как он находится вне цикла for.Чтобы исправить это, у вас есть 2 решения: переместите модал внутри цикла или создайте модалы внутри другого цикла.

Решение:

<div class="row">
    <% users.forEach(function(user){ %>
    <!-- User -->
    <div class="col-md-4">
        <div class="card h-100 justify-content-center">
            <img src="<%= '/uploads/' + user.picpath %>" class="img-thumbnail">
            <div class="caption">
                <h4>
                    <%= user.fname + ' ' + user.lname %>
                </h4>
            </div>
            <p>
                <button class="myBtn btn btn-primary" data-toggle="modal" data-target="#myModal<%= user.userid %>">Details</button>
            </p>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal" id="myModal<%= user.userid %>" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">
                        <%= user.fname + ' ' + user.lname %>
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    <% }); %>
</div>