bootstrap confirmation按钮提示组件使用详解
编程学习 2021-07-04 18:33www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了bootstrap confirmation按钮提示组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap-confirmation按钮提示组件，它类似于js里面confirm的功能,界面更加美观。
介绍这个组件之前，可以先来看看bootstrap里面提示框的效果：
1、源码地址
2、效果展示
3、代码示例
所需引入的js和css
<link href="css/bootstrap.css" rel="external nofollow" 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>
常用的属性。比如：
btnOkClass：确定按钮的样式；
btnCancelClass：取消按钮的样式；
singleton：是否只允许出现一个确定框；
popout：当用户点击其他地方的时候是否隐藏确定框；
title：标题；
placement：放置位置；
onConfirm：确定事件；
onCancel：取消事件；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。