CODEWITHSUNDEEP
javascriptphphtmlbuttonmodal-dialog
ofmiceandmoon
ofmiceandmoon

Reputation: 596

How to open modal when a button is clicked

In the comments section on a blog I'm coding I want the admin to be able to delete a comment.

I have a button next to each comment and I want a modal box to be opened when the delete button is clicked.

In this modal box I want to ask again if the comment should be deleted or not, if yes then it should lead me back to the post and the comment should be deleted.

Do I need javascript to do this? Unfortunately I'm new to php and I wondered if it's possible to only do it with html & css.

I have a PostsController.php in which the site is rendered (action page) and I have the CommentsRepository.php in which the connection to the db table comments takes place.

This is the part of the comment section:

<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>

I know how to do the query, but I don't know how to open the modal box when the button is clicked.

I would really appreciate if someone can help me, especially if I need javascript to do this.

Upvotes: 0

Views: 4632

Answers (3)

Thanaen
Thanaen

Reputation: 328

You don't need javascript, but it sure makes the thing easier!

I've found some examples of pop-up that are opened without any javascript. I find this one intersting:

To do so, they create a pop-up with a visibility: hidden; css attribute, and they use the target pseudo-class to set this attribute to visibility: visible;

To trigger the target pseudo-class, they create a link (that acts like a button) that references the ID of your pop-up.

The link will target your pop-up, triggering the target pseudo-class, and showing your pop-up!

There is also the Bootstrap option, as recommended by Jeppe Spanggaard, which works fine!

Hope it helped in any way!

Upvotes: 2

Pankaj Jha
Pankaj Jha

Reputation: 886

You can use SweetAlert for your cause, it is more elegant and easy to use.

https://sweetalert2.github.io/

here's working example: Jsfiddle

Simply on Delete Button click Apply following Code

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'
    )
  }
})

Here's how it will look, Sweet Alert Example

EDIT

Based on your comment I think this might be helpfull JsFiddle

You can customize the popup like this Example

Upvotes: 1

Jeppe Spanggaard
Jeppe Spanggaard

Reputation: 97

You can use javascript for this: https://www.w3schools.com/howto/howto_css_modals.asp

But if you use Bootstrap there is an easier way: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h

Upvotes: 2

Related Questions