jQuery点击调用消息提示框插件



174 694 232



特效描述:jQuery 点击调用 消息提示框插件,jQuery消息提示框插件设置4种样式提示框、成功提示、失败提示、警告提示、信息提醒等点击按钮调用提示框代码。

代码结构

1. 引入CSS

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

2. 引入JS

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

3. HTML代码

<div class="p40">
	<p>点击调用提示</p>
	<button class="btn btn-success">成功提示</button>
	<button class="btn btn-danger">失败提示</button>
	<button class="btn btn-warning">警告提示</button>
	<button class="btn btn-info">信息提醒</button>
</div>
<div class="p40">
<p>调用方式:</p>
<pre>
$('.btn-success').on('click',function(){
    $.message('成功');
})
$('.btn-danger').on('click',function(){
    $.message({
        message:'失败提示',
        type:'error'
    });
})
$('.btn-warning').on('click',function(){
    $.message({
        message:'警告提示',
        type:'warning'
    });
})
$('.btn-info').on('click',function(){
    $.message({
        message:'信息提醒',
        type:'info'
    });
})
 </pre>
            <p class="mt20">参数详解:</p>
<pre>
message:' 操作成功',    //提示信息
time:'2000',           //显示时间(默认:2s)
type:'success',        //显示类型,包括4种:success.error,info,warning
showClose:false,       //显示关闭按钮(默认:否)
autoClose:true,        //是否自动关闭(默认:是)
</pre>
        </div>
<script>
$(function(){
	$('.btn-success').on('click',function(){
		$.message('成功');
	})
	$('.btn-danger').on('click',function(){
		$.message({
			message:'失败提示',
			type:'error'
		});
	})
	$('.btn-warning').on('click',function(){
		$.message({
			message:'警告提示',
			type:'warning'
		});
	})
	$('.btn-info').on('click',function(){
		$.message({
			message:'信息提醒',
			type:'info'
		});
	})
})
</script>



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


热门标签: 顶部悬浮 底部悬浮 浮动导航菜单 右键菜单 图片头像上传 图片广告 文字提示框 文件上传 对联广告 提示框/弹出层 文本框 layer 下拉框 叠加浮动层 lightbox 复选 单选 Tooltip工具提示框 登录框 浮动提示框 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 悬浮浮动漂浮 弹出层拖动 窗口提示框 浮动提示框 切换按钮 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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