Не работает переключение между модальными окнами. Bootstrap
Не хочет открываться второе модальное окно, не могу разобраться почему. Подскажите, пожалуйста
Подключены:
- https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js
- https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css
Код:
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<div class="modal fade" id="addTaskModal" tabindex="-1" aria-hidden="true" aria-labelledby="addTaskModal" data-bs-backdrop="static">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<form class="form" name="CreateOrder">
<div class="row gx-0">
<div class="col-lg-8">
<div class="task-modal-left">
<h5 class="modal-title" id="addTaskModal">Создание заказа</h5>
<div class="input-style-1">
<label>Номер заказа/Счета</label>
<input name="SalesNum" id="SalesNum" type="text" class="form-control" placeholder="Введите номер заказа" />
</div>
<div class="input-style-1">
<label>Клиент</label>
<input name="ClientName" type="text" class="form-control" placeholder="Введите наименование клиента" />
</div>
</div>
</div>
<div class="col-lg-4">
<div class="task-modal-right">
<button type="button" class="border-0 bg-transparent ms-auto close-button" data-bs-dismiss="modal">
<svg width="26" height="26" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M14.9999 13.2324L21.1874 7.04492L22.9549 8.81242L16.7674 14.9999L22.9549 21.1874L21.1874 22.9549L14.9999 16.7674L8.81242 22.9549L7.04492 21.1874L13.2324 14.9999L7.04492 8.81242L8.81242 7.04492L14.9999 13.2324Z"
fill="currentColor" />
</svg>
</button>
<div class="row">
<div class="col-6">
<button type="button" data-bs-dismiss="modal" class="btn btn-danger w-100">
Отмена
</button>
</div>
<div class="col-6">
<button class="btn btn-primary w-100" data-bs-target="#ModalSalesLine" data-bs-toggle="modal">
<i class="lni lni-plus me-1 text-sm text-bold"></i>
Создать
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- ======== add task modal end =========== -->
<!-- ======== add task modal_2 start =========== -->
<div class="modal fade" id="ModalSalesLine" aria-hidden="true" aria-labelledby="ModalSalesLine" tabindex="-1" data-bs-backdrop="static">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<form class="form" name="CreateLine">
<div class="row gx-0">
<div class="col-lg-8">
<div class="task-modal-left">
<h5 class="modal-title">Создание строк</h5>
<div class="input-style-1">
<label>Номер заказа/Счета</label>
<input name="SalesNum" id="SalesNum" type="text" class="form-control" placeholder="Введите номер заказа" />
</div>
<div class="input-style-1">
<label>Комментарий</label>
<input name="Comment" type="text" placeholder="Дополнительный комментарий (доступен только менеджеру)" rows="2" />
</div>
</div>
</div>
<div class="col-lg-4">
<div class="task-modal-right">
<button type="button" class="border-0 bg-transparent ms-auto close-button" data-bs-dismiss="modal">
<svg width="26" height="26" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M14.9999 13.2324L21.1874 7.04492L22.9549 8.81242L16.7674 14.9999L22.9549 21.1874L21.1874 22.9549L14.9999 16.7674L8.81242 22.9549L7.04492 21.1874L13.2324 14.9999L7.04492 8.81242L8.81242 7.04492L14.9999 13.2324Z"
fill="currentColor" />
</svg>
</button>
<div class="row">
<div class="col-6">
<button type="button" data-bs-dismiss="modal" class="btn btn-danger w-100">
Отмена
</button>
</div>
<div class="col-6">
<button class="btn btn-primary w-100" name="mandatory_fields">
<i class="lni lni-plus me-1 text-sm text-bold"></i>
Создать
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#addTaskModal" role="button">Open modal</a>
Источник: Stack Overflow на русском