首先非常感谢网友纠结伦的无私分享,此原创jquery弹出层插件cylater是他分享到JquerySchool网站上的第4款原创作品,该插件目前仅提供6种简单的弹出框(alter,confirm,prompt,message,loading,page) 兼容 IE8+,Chorme,Firefox 等主流浏览器。(低版本的IE 浏览器未测试过),插件默认就是固定居中对齐,并且支持随浏览器的尺寸改变而自动调整。
如果需要调用 $.cylater.page 中子页面的函数,请先获取到 page的id 然后使用 $("#iframe_id")[0].contentWindow.send('xxx'); 等其他方式
注意:alter,confirm,prompt,message,loading 这些类型的弹出框。高度会随内容自动调整。为了保持界面美观。建议控制需要呈现的字符串长度。
参数
id //唯一标识
width //提示框的宽度
msg //消息提示 ($.cylater.prompt 无效)
prompt //提示信息 ($.cylater.prompt 专属)
timeout//自动关闭 ($.cylater.message 专属)
callbackfun //回调函数 function(data,type) type : "close"、"ok"、"cancel"
url //URL($.cylater.page 专属)
title //标题($.cylater.page 专属)
height //高度($.cylater.page 专属)
scroll //是否显示滚动条($.cylater.page 专属)
DEMO
$.cylater.alert({
id:'myLaterAlert',
msg:'这是我做的第一个提示框插件',
callbackfun:function(data,type){
alert("type:"+type + " data:"+data);
}
});
$.cylater.confirm({
id:'myLaterConfirm',
msg:'这是我做的第一个提示框插件',
callbackfun:function(data,type){
alert("type:"+type + " data:"+data);
}
});
$.cylater.prompt({
id:'myLaterPrompt',
prompt:'输入你的姓名',
callbackfun:function(data,type){
alert("type:"+type + " data:"+data);
}
});
$.cylater.message({
id:'myLaterMessage',
msg:'5s后会自动隐藏',
callbackfun:function(data,type){
alert("type:"+type + " data:"+data);
},
timeout:5000
});
注意:在使用 $.cylater.message 未设置 timeout 则需要手动执行 $.cylater.close({id:'msgid',clsbtnfun:function(){}})
其中 ID 是必设置的,callbackfun 是可选的
$.cylater.loading({
id:'myLaterLoading',
msg:'5s后会自动隐藏',
callbackfun:function(data,type){
alert("type:"+type + " data:"+data);
},
timeout:5000
});
注意:在使用 $.cylater.loading 未设置 timeout 则需要手动执行 $.cylater.close({id:'msgid',clsbtnfun:function(){}})
其中 ID 是必设置的,callbackfun 是可选的
$.cylater.page({
id:'myLaterPage',
url:'http://www.news.qq.com',
title:'腾讯新闻',
width:1024,
height:726,
scroll:"false",
callbackfun:function(data,type){
alert("type:"+type + " data:"+data);
}
});
效果如下:
如果您觉得本作品对您的学习有所帮助:
关键字:
网友纠结伦 jquery弹出层插件 层特效 cylater