You can try something like this:
STEP 1
First of all, you need to add the file bootstrap.cssusing the link tag, jQueryand bootstrap.jsusing the script tag in your section of the chapter of your web page. On the bootstraps website you will find detailed information about this. In addition, you can create an individual file with selected components if you do not want to use the full boot infrastructure.
STEP - 2
html- , delete_confirm.php
<div class="modal fade" id="confirmDelete" role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete Parmanently</h4>
</div>
<div class="modal-body">
<p>Are you sure about this ?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" id="confirm">Delete</button>
</div>
</div>
</div>
</div>
JavaScript ,
<!-- Dialog show event handler -->
$('#confirmDelete').on('show.bs.modal', function (e) {
$message = $(e.relatedTarget).attr('data-message');
$(this).find('.modal-body p').text($message);
$title = $(e.relatedTarget).attr('data-title');
$(this).find('.modal-title').text($title);
var form = $(e.relatedTarget).closest('form');
$(this).find('.modal-footer #confirm').data('form', form);
});
$('#confirmDelete').find('.modal-footer #confirm').on('click', function(){
$(this).data('form').submit();
});
- 3
, , , , require_once include_once, :
require_once('delete_confirm.php');
- 4
, - :
<form method="POST" action="http://example.com/admin/user/delete/12" accept-charset="UTF-8" style="display:inline">
<button class="btn btn-xs btn-danger" type="button" data-toggle="modal" data-target="#confirmDelete" data-title="Delete User" data-message="Are you sure you want to delete this user ?">
<i class="glyphicon glyphicon-trash"></i> Delete
</button>
</form>