javascript - How to open modal when a button is clicked - Stack Overflow

admin管理员组

文章数量:1435859

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

I have a button next to each ment 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 ment should be deleted or not, if yes then it should lead me back to the post and the ment 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 ments takes place.

This is the part of the ment section:

<div class="ments-list">
 <?php foreach ($ments AS $ment): ?>
  <div class="one-ment">
   <p><?php echo e($ment->content); ?></p>
   <div class="one-ment-edit">
    <input type="button" value="x" name="delete" class="delete-ment" />
   </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.

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

I have a button next to each ment 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 ment should be deleted or not, if yes then it should lead me back to the post and the ment 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 ments takes place.

This is the part of the ment section:

<div class="ments-list">
 <?php foreach ($ments AS $ment): ?>
  <div class="one-ment">
   <p><?php echo e($ment->content); ?></p>
   <div class="one-ment-edit">
    <input type="button" value="x" name="delete" class="delete-ment" />
   </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.

• javascript
• php
• html
• button
• modal-dialog

Share Improve this question Follow asked Jan 10, 2019 at 10:03 ofmiceandmoonofmiceandmoon 60622 gold badges1414 silver badges3030 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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:

• Pure CSS popup/modal box without javascript

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 remended by Jeppe Spanggaard, which works fine!

Hope it helped in any way!

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

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

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,

EDIT

Based on your ment I think this might be helpfull JsFiddle

You can customize the popup like this Example

本文标签： javascriptHow to open modal when a button is clickedStack Overflow