Как открыть модал при нажатии кнопки

Question

В разделе комментариев блога, который я пишу, я хочу, чтобы администратор мог удалить комментарий.

У меня есть кнопка рядом с каждым комментарием, и я хочу, чтобы при нажатии на delete button открывалось модальное поле.

В этом модальном окне я хочу еще раз спросить, следует ли удалять комментарий или нет, если да, то это должно привести меня обратно к сообщению, а комментарий следует удалить.

Нужен ли мне JavaScript для этого? К сожалению, я новичок в php, и мне стало интересно, возможно ли это сделать только с помощью html & css.

У меня есть PostsController.php, в котором отображается сайт (страница действия), и у меня есть CommentsRepository.php, в котором происходит соединение с таблицей БД comments.

Это часть раздела комментариев:

<div class="comments-list">
 <?php foreach ($comments AS $comment): ?>
  <div class="one-comment">
   <p><?php echo e($comment->content); ?></p>
   <div class="one-comment-edit">
    <input type="button" value="x" name="delete" class="delete-comment" />
   </div>
  </div>
 <?php endforeach; ?>
</div>

Я знаю, как выполнить запрос, но я не знаю, как открыть модальное окно при нажатии кнопки.

Буду очень признателен, если кто-нибудь сможет мне помочь, особенно если мне понадобится JavaScript для этого.

Answer 1

Вы можете использовать SweetAlert для своего дела, он более элегантный и простой в использовании.

https://sweetalert2.github.io/

Вот рабочий пример: Jsfiddle

Просто нажмите кнопку Удалить Применить следующий код

Swal({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.value) {
    Swal(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})

Вот как это будет выглядеть,

EDIT

Основываясь на вашем комментарии, я думаю, что это может быть полезно JsFiddle

Вы можете настроить всплывающее окно следующим образом Пример

Answer 2

Вам не нужен javascript, но это, безусловно, облегчает задачу!

Я нашел несколько примеров всплывающих окон, которые открываются без JavaScript. Я нахожу это интересным:

• Всплывающее / модальное окно Pure CSS без Javascript

Для этого они создают всплывающее окно с атрибутом visibility: hidden; css и используют псевдокласс target , чтобы установить для этого атрибута visibility: visible;

Чтобы вызвать псевдокласс target , они создают ссылку (которая действует как кнопка), которая ссылается на ID вашего всплывающего окна.

Ссылка будет нацелена на ваше всплывающее окно, вызывая псевдокласс target и показывая ваше всплывающее окно!

Существует также опция Bootstrap , рекомендованная Jeppe Spanggaard, которая отлично работает!

Надеюсь, это помогло!

Answer 3

Вы можете использовать javascript для этого: https://www.w3schools.com/howto/howto_css_modals.asp

Но если вы используете Bootstrap, есть более простой способ: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h