Как открыть модальное окно bootstrap скриптом?

Question

У меня есть кнопка в форме, при нажатии которой, идет проверка условия. PHP отрабатывает нормально, но модальное окно не открывается. В JS не разбираюсь.

ВОПРОС: Как в обработчике нажатия кнопки вызвать модальное окно?

PHP КОД и КНОПКА

    <?php
            if( isset( $_POST['delete'] ) )
            {
                # тут мой код проверки.
            }
?>
        
        <form method="POST">
            <input type="submit" name="delete" value="Удалить" />
    </form>

ПРИМЕР МОДАЛЬНОГО ОКНА

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>

<div id="modal" class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- if (someone): -->
<script>
new bootstrap.Modal(document.getElementById('modal')).show();
</script>
<!-- endif -->

БЛОГ НА HUSL

Как открыть модальное окно bootstrap скриптом?

Ответы (1 шт):