как вызвать javascript функцию при открытии bootstrap модального окна

Разберем на примере. Сначала создадим простое модальное окно с использованием HTML и Bootstrap:

<!-- Кнопка для открытия модального окна -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Открыть модальное окно
</button>

<!-- Модальное окно -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Модальное окно</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">Закрыть</button>
      </div>
    </div>
  </div>
</div>

Теперь, чтобы вызвать JavaScript функцию при открытии модального окна, вы можете использовать событие .on('show.bs.modal', ...) для вашего модального окна. Вот пример JavaScript кода:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>

<script>
  $(document).ready(function() {
    // Функция, которую мы будем вызывать
    function myFunction() {
      console.log("Модальное окно открыто!");
      // Здесь можно добавить любой другой код, который вы хотите выполнить
    }

    // Привязка события к модальному окну
    $('#myModal').on('show.bs.modal', function (event) {
      myFunction();
    });
  });
</script>