bootstrap弹出窗口从上到下动态改变位置

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">打开弹出窗口</button>

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <!-- 弹出窗口的内容 -->
    </div>
  </div>
</div>

.modal.fade .modal-dialog {
  transform: translate(0, -100%);
  transition: transform 0.3s ease-out;
}

.modal.fade.show .modal-dialog {
  transform: translate(0, 0);
}

$('#myModal').on('show.bs.modal', function () {
  $(this).find('.modal-dialog').addClass('fade');
});

$('#myModal').on('shown.bs.modal', function () {
  $(this).find('.modal-dialog').removeClass('fade');
});