使用Bootstrap 3模式框确认删除 [英] Confirm deletion using Bootstrap 3 modal box

问题描述

我需要使用Bootstrap 3模式框确认删除(是/否).我该如何创建呢?

I need to confirm deletion using Bootstrap 3 modal box (YES/NO). How can I create this?

HTML代码:

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

推荐答案

您需要HTML中的模式.单击删除按钮后，它将弹出模态.防止单击该按钮提交表单也很重要.单击确认后，将提交表单.

You need the modal in your HTML. When the delete button is clicked it popup the modal. It's also important to prevent the click of that button from submitting the form. When the confirmation is clicked the form will submit.

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

<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<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>

这篇关于使用Bootstrap 3模式框确认删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！