使用Bootstrap 3模式框确认删除

  • Z时代
  • 2024-01-10
  • 分类：问答

我需要使用Bootstrap 3模式框确认删除（是/否）。我该如何创建呢？

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中的模式。单击删除按钮后，它将弹出模态。防止单击该按钮提交表单也很重要。单击确认后，将提交表单。

$('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模式框确认删除 的全部内容， 来源链接： utcz.com/qa/407647.html

回到顶部