每日一篇之bootstrap-confirmation

一、先上效果图：

 

 二、上代码：
1、完整代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!------------------- 只需要导入bootstrap的样式 ----------------->
<link rel="stylesheet" href="assert/css/bootstrap/bootstrap.css" >

<title>弹层之美</title>
</head>
<body>
<br><br><br><br><br>
<div class="row" >
<div  class="col-md-4" ></div>
<div  class="col-md-4" >
<!------------------- 最基本的button载体 ----------------->
<button id="btn_top" class="btn btn-primary" >在上面</button>
<button id="btn_bottom" class="btn btn-primary" >在下面</button>
</div>
<div  class="col-md-4" >
<button id="btn_left" class="btn btn-primary" >在左边</button>
<button id="btn_right" class="btn btn-primary" >在右边</button>
</div>
</div>
<!------------------- 最开始需要导入jquery的脚本----------------->
<script type="text/javascript" src="assert/js/jquery.js" ></script>
<!---------- ！！！敲黑板了，敲黑板了，这里导入的是bootstrap2的脚本，bootstrap3的不管用------------>
<!-------- 还有一个：官网上是导入/bootstrap-tooltip.js，这个已经包含在bootstrap.js里了-------->
<script type="text/javascript" src="assert/js/bootstrap2/bootstrap.js" ></script>
<!------------------- 导入这个组件自身的脚本----------------->
<script type="text/javascript" src="assert/js/bootstrap-confirm/bootstrap-confirmation.js" ></script>
<script type="text/javascript">
		$(function(){
			$("#btn_top").confirmation({
		        placement: "top",        //弹层在哪里出现（默认top）
		        title: "确定删除吗？",     //弹层展现的内容（默认Are you sure?）
		        btnOkLabel: '确定',      //确认按钮的显示的内容（默认Yes）
		        btnCancelLabel: '取消',  //取消按钮的显示的内容（默认No）
                onConfirm: function () {  //点击确认按钮的事件
                    alert("点击了确定");  
                },  
                onCancel: function () {    //点击取消按钮的事件 
                    $('#btn_top').confirmation('hide')   //隐藏弹层 

                } 
		})
    
		$("#btn_bottom").confirmation({
			        placement: "bottom",  
			        title: "确定删除吗？",  
			        btnOkLabel: '确定',  
			        btnCancelLabel: '取消',  
			})
	
		$("#btn_left").confirmation({
			        placement: "left",  
			        title: "确定删除吗？",  
			        btnOkLabel: '确定',  
			        btnCancelLabel: '取消',  
			})
	
		$("#btn_right").confirmation({
			        placement: "right",  
			        title: "确定删除吗？",  
			        btnOkLabel: '确定',  
			        btnCancelLabel: '取消',  
			})
		})


</script>

</body>
</html>

三、具体样式讲解

$("#btn_top").confirmation({
                animation: true,         //弹层出现和消失的时候是否有过渡效果，默认true
		        placement: "top",        //弹层在哪里出现（默认top）
                trigger:"click",        //弹层出现消失的触发事件，默认click,还有hover|focus|manual
		        title: "确定删除吗？",     //弹层展现的内容（默认Are you sure?）
		        btnOkLabel: '确定',      //确认按钮的显示的内容（默认Yes）
		        btnCancelLabel: '取消',  //取消按钮的显示的内容（默认No）
                href:"#",//默认是#,可以填写地址，会在点击确定按钮后，先执行下面的onConfirm的方法，再进行跳转（PS:这个很讨厌，有时候设置了javascript:void(0);
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　还会给你新建个标签页，我是去源码里面把这个注释掉了）
                onConfirm: function () {  //点击确认按钮的事件
                    alert("点击了确定");  
                },  
                onCancel: function () {    //点击取消按钮的事件 
                    $('#btn_top').confirmation('hide')   //隐藏弹层   hide换成show，就是显示了
                },
                target:"_self",  //默认是_self，这个我没有明白，希望又会的朋友指点下
                btnOkClass:'btn-primary',//确认按钮的样式，默认btn-primary
                btnCancelClass:"",//取消按钮的样式，默认为空
                delay: { show: 1000, hide: 2000 },//弹出层出现的时间延迟1秒，消失的时间延迟2秒
                
    
		})

四、官方地址：

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

这个是官方的地址，应该还有些其他东西可以发掘，要再深入的可以去看看。

 

以上，如果有什么错误的，望指出。。。

 
 
 
 
 
 

posted on 2017-12-15 09:14  人间最得意  阅读(649)  评论(0)    收藏  举报