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

问题描述

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

HTML 代码:

<button class='btn' type="submit" name="remove_levels" value="delete"><span class="fa fa-times"></span>删除</表单>

解决方案

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

$('button[name="remove_levels"]').on('click', function(e) {var $form = $(this).closest('form');e.preventDefault();$('#confirm').modal({背景:'静态'，键盘:假}).on('click', '#delete', function(e) {$form.trigger('提交');});$("#cancel").on('click',function(e){e.preventDefault();$('#confirm').modal.model('hide');});});

<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="样式表"/><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>删除</表单><div id="confirm" class="modal"><div class="modal-body">你确定吗?

<div class="modal-footer"><button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">删除</button><button type="button" data-dismiss="modal" class="btn">取消</button>

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

HTML code:

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

解决方案

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');
        });
      $("#cancel").on('click',function(e){
       e.preventDefault();
       $('#confirm').modal.model('hide');
      });
    });

<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">
  <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屋！