利用jQuery实现提示框插件



45 176 59



特效描述:利用jQuery实现 提示框插件,利用jQuery实现提示框插件

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/message.js"></script>

3. HTML代码

<div class="p40">
	<p class="title">点击调用提示</p>
	<button class="btn btn-info">信息提醒</button>
	<button class="btn btn-success">成功提示</button>
	<button class="btn btn-warning">警告提示</button>
	<button class="btn btn-danger">失败提示</button>
	<button class="btn btn-default">拓展一下</button>
</div>
<div class="p40">
<p class="title">调用方式:</p>
<pre>$('.btn-info').on('click',function(){
    $.message({
        message:'信息提醒',
        type:'info'
    });
})
$('.btn-success').on('click',function(){
    $.message({
        message:'成功提示',
        type:'success'
    });
})
$('.btn-warning').on('click',function(){
    $.message({
        message:'警告提示',
        type:'warning',
	duration:0,
	showClose:true,
	center:true,
	onClose:function(){alert('知道了')}
    });
})
$('.btn-danger').on('click',function(){
    $.message({
        message:'失败提示',
        type:'error'
    });
})
</pre>
<p class="mt20 title">参数详解:</p>
<pre>message:' 操作成功',    //提示信息
duration:'5000',       //显示时间(默认:5s)
type:'info',           //显示类型,包括4种:success.error,info,warning 默认info
showClose:false,       //显示关闭按钮(默认:否)
center:true,           //页面竖直居中(默认:否)
onClose:function,      //点击关闭回调函数
</pre>
</div>
<script type="text/javascript">
$(function(){
	$('.btn-success').on('click',function(){
		$.message({
			message:'成功',
			type:'success'
		});
	})
	$('.btn-danger').on('click',function(){
		$.message({
			message:'失败提示',
			type:'error'
		});
	})
	$('.btn-warning').on('click',function(){
		$.message({
			message:'警告提示',
			type:'warning',
			duration:0,
			showClose:true,
			center:true,
			onClose:function(){alert('知道了')}
		});
	})
	$('.btn-info').on('click',function(){
		$.message({
			message:'信息提醒',
			type:'info'
		});
	})
	$('.btn-default').on('click',function(){
		$.message({
			type:'success',
			message:'<div style="color:#333;font-weight:bold;font-size:16px;">用户信息保存成功<div><span style="color:lightgrey;font-size:small;">3秒后自动关闭</span>',
			duration:3000,
			center:true
		})
	})
})
</script>
<div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 文字提示框 提示框/弹出层 layer lightbox Tooltip工具提示框 浮动提示框 html5弹窗动画 弹出层拖动 窗口提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到