How to make a modal window with options as js confirm?

Question

How to make a modal window with options as js confirm?

For example, I have this: <a href="/calc-delete.php?" onclick="return confirm('Do you want to remove?')">Delete</a> <a href="/calc-delete.php?" onclick="return confirm('Do you want to remove?')">Delete</a>

How to do something like the my example, but with modal window? It would be cool, if it would be a bootstrap modal window and that the answer would show in the same modal window

Answer 1

try this,

HTML

<form action ="#" method="POST">
<button class='btn btn-danger btn-xs' type="submit" name="remove_levels" value="delete"><span class="fa fa-times"></span> delete</button>
</form>

<div id="confirm" class="modal hide fade">
  <div class="modal-body">
    Are you sure?
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
    <button type="button" data-dismiss="modal" class="btn">Cancel</button>
  </div>
</div>

JAVASCRIPT

  $('button[name="remove_levels"]').on('click', function(e){
        var $form=$(this).closest('form');
        e.preventDefault();
        $('#confirm').modal({ backdrop: 'static', keyboard: false })
            .one('click', '#delete', function (e) {
                $form.trigger('submit');
            });
    });

DEMO

For multiple Button (multiple link on same model)

DEMO

Answer 2

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

The "Trigger" part:

To trigger the modal window, you need to use a button or a link.

Then include the two data-* attributes:

data-toggle="modal" opens the modal window
data-target="#myModal" points to the id of the modal

The "Modal" part:

The parent <div> of the modal must have an ID that is the same as the value of the data-target attribute used to trigger the modal ("myModal").

The .modal class identifies the content of <div> as a modal and brings focus to it.

The .fade class adds a transition effect which fades the modal in and out. Remove this class if you do not want this effect.

The attribute role="dialog" improves accessibility for people using screen readers.

The .modal-dialog class sets the proper width and margin of the modal.

The "Modal content" part:

The <div> with class="modal-content" styles the modal (border, background-color, etc.). Inside this <div> , add the modal's header, body, and footer.

The .modal-header class is used to define the style for the header of the modal. The <button> inside the header has a data-dismiss="modal" attribute which closes the modal if you click on it. The .close class styles the close button, and the .modal-title class styles the header with a proper line-height.

The .modal-body class is used to define the style for the body of the modal. Add any HTML markup here; paragraphs, images, videos, etc.

The .modal-footer class is used to define the style for the footer of the modal. Note that this area is right aligned by default.

Answer 3

w3c Schools have a very nice article on how to create a modal

http://www.w3schools.com/howto/howto_css_modals.asp

All you have to do, is open the modal with your onclick=return openModal() and handle the php call from your OK button in your modal.