HTML-модалы переплетаются при нажатии на действие, должны быть отдельными

У меня есть два модала на одном HTML-шаблоне. Когда я внедрил второй модал, первый стал привязан к его действиям, а я хочу, чтобы они были раздельными. Когда я нажимаю на кнопку добавления времени, я хочу, чтобы отображался только модал формы времени. Когда я нажимаю на пользователя, я хочу, чтобы некоторые сведения о его профиле отображались в правой части страницы. На данный момент, когда я нажимаю кнопку "Добавить время", они складываются вместе.

Вот изображение проблемы:

enter image description here

Вы видите, что передняя модальная форма закрывает форму позади, я хочу, чтобы это были отдельные действия. Когда я нажимаю кнопку для добавления времени, должна отображаться только эта модальная форма: enter image description here

Когда я нажимаю на кнопку пользователя, на правой странице должен отображаться только этот модал: enter image description here

Вот HTML моей кнопки: 

                                                        <button class="btn btn-danger add-btn mb-0" data-bs-toggle="modal" data-bs-target="#timetrackModal"><i class="ri-add-line align-bottom me-1"></i> Add Time Entry</button>
                                                        <button type="button" class="btn py-0 fs-16 text-body" id="settingDropdown" data-bs-toggle="dropdown">
                                                            <i class="ri-stack-line"></i>
                                                        </button>

                                                                <a href="#userProfileCanvasExample{{tech.pk}}" class="avatar-group-item" data-bs-toggle="offcanvas" data-bs-trigger="hover"
                                                    data-bs-target="#userProfileCanvasExample{{tech.pk}}" aria-controls="userProfileCanvasExample{{tech.pk}}" title={{tech.username}}>
                                                                    <div class="rounded-circle avatar-xs">
                                                                        <div class="avatar-title rounded-circle bg-info">
                                                                            {{tech.username|first}}
                                                                        </div>
                                                                    </div>
                                                                </a>

Вот модальный HTML:

Это начало происходить, когда я добавил timetrackModal. Когда я удаляю его, модал UserProfileCanvas работает нормально. Я пробовал работать с классами, тегами id и зашел в тупик. Они работают независимо, но когда оба построены, это приводит к многослойному модалу

Примечание: HTML возвращает данные, используя Django в качестве веб-фреймворка

Перепутали <div> и не хватало двух </div> закрытий в конце каждого модала на странице.

Этот пост помог мне: Невозможно заставить два модала Bootstrap работать на одной странице

Вернуться на верх