添加 bootbox.js 确认框到 href link

Question

我正在使用一些 href 选项卡在 html table 中的所有行上绘制按钮。当用户单击行按钮时，它将使用 HTML GET 将用户重定向到另一个具有某些行值的 PHP 脚本。但是在我当前的实现中，当用户单击按钮时没有确认。我添加了基本的 javascript 确认框，但它非常基本，浏览器每次都要求停止弹出警报。

因此，我没有使用普通的 javascript，而是找到了名为 bootbox.js 的库，它是专门为 CSS 警报和确认框设计的。但是，当我在当前 jquery 实现中应用 bootbox 方法时，它不起作用！

bootbox - bootbox docs

下面是我的代码：

这是我的 href 代码，它使 html link

echo "<a href='approveone.php?id=$lvid&empno=$empno&ltype=$leavetype&hmd=$leavehmd&dprtmnt=$empdepartment&adminname=$adminusername' class='btn btn-success btn-xs m-r-1em confirmation' >Approve</a>";

这是我的 jQuery 代码部分，其中包含引导框调用。

<script type="text/javascript">
    $('.confirmation').on('click', function () {
          return bootbox.confirm('Are you sure?');
    });
</script>

Answer 1

您应该阻止单击 link 的默认行为（否则浏览器会将您重定向到那个 link）。
confirm 函数应该接收一个回调函数（处理确认的结果）。

检查这个例子：

$('.confirmation').on('click', function (e) {
  e.preventDefault();
  href = $(this).attr('href');
  return bootbox.confirm('Are you sure?', function(result) {
    if (result) {
      window.location = href
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript' src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css">


<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>

<a href='approveone.php?id=$lvid&empno=$empno&ltype=$leavetype&hmd=$leavehmd&dprtmnt=$empdepartment&adminname=$adminusername' class='btn btn-success btn-xs m-r-1em confirmation' >Approve</a>

添加 bootbox.js 确认框到 href link

Add bootbox.js confirmation box to href link

html

javascript

css

jquery

bootbox