利用js实现手机提示框图标加载特效zepto



13 48 17



特效描述:利用js实现 手机提示框 图标加载 特效zepto,利用js实现手机提示框图标加载特效zepto

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="style/dialog.css">

2. 引入JS

<script src="javascript/zepto.min.js"></script>
<script type="text/javascript" src="javascript/dialog.min.js"></script>

3. HTML代码

<div class="btn-container">
    <input type="button" id="success" value="成功" />
    <input type="button" id="error" value="错误" />
    <input type="button" id="load" value="正在加载" />
    <input type="button" id="tip" value="提示" />
</div>
<script type="text/javascript">
// =============================================
// @des:            
// type:success成功 error错误 load加载中 tip提示信息
// msg:内容
// delay:显示时间
// callBack(function):回调函数 
// @author:         shaotianyu
// @time:           2017-03-19
// =============================================
// 
// 默认值
// width:180, 动画容器的宽度 *宽度默认180px
// height:150,  动画容器的高度 *宽度默认150px 
// type:"success" 弹出动画类型 *默认为success
// msg:'操作成功', 弹出的信息  *默认 ‘操作成功’
// delay:0, 显示持续时间 *默认0
// bg:true, 是否显示背景遮罩层 *默认有浅黑色背景遮罩
// bgWhite:false, 背景是否为白色 *默认不是白色
// clickDomCancel:false, 点击遮罩层,弹出效果立即消失 *默认false
// callback:null, 执行完动画后的回调函数 *默认null
$('#success').click(function(){
   popup({type:'success',msg:"操作成功",delay:1000,callBack:function(){
	  console.log('callBack~~~');
   }});
})
$('#error').click(function(){
   popup({type:'error',msg:"操作失败",delay:2000,bg:true,clickDomCancel:true});
})
$('#load').click(function(){
   popup({type:'load',msg:"请等待",delay:1500,callBack:function(){
	  popup({type:"success",msg:"加载成功",delay:1000});
   }});
})
$('#tip').click(function(){
   popup({type:'tip',msg:"提示信息",delay:null});
})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



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


热门标签: 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 lightbox

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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