bootstrap-confirmation_bootstrap confirm-优快云博客

本文介绍了一个基于Bootstrap的美观确认框组件——Bootstrap-Confirmation。该组件提供了丰富的配置选项，如按钮样式、提示框位置等，并附带了详细的使用示例。

bootstrap-confirmation按钮提示组件，它类似于js里面confirm的功能,界面更加美观。

介绍这个组件之前，可以先来看看bootstrap里面提示框的效果：

1、源码地址

http://ethaizone.github.io/Bootstrap-Confirmation/

2、效果展示

3、代码示例

所需引入的js和css

<link href="css/bootstrap.css" rel="stylesheet" />
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap-confirmation.js"></script>

初始化

 <button type="button" id="btn_submit1" class="btn btn-primary" style="margin: 100px;"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</button>

js实现代码

<script type="text/javascript">
    $(function () {
        $('#btn_submit1').confirmation({
            animation: true,
            placement: "top",
            title: "确定要删除吗？",
            btnOkLabel: '确定',
            btnCancelLabel: '取消',
            onConfirm: function () {
                alert("点击了确定");
            },
            onCancel: function () { 
            	alert("点击了取消"); 

            }
        })

    });
    </script>

常用的属性。比如：