网友纠结伦分享原创jquery弹出层插件cylater
JquerySchool网站出品(http://www.jq-school.com
在线API帮助文档
官方网站学习交流QQ群jquery学堂11群

jquery-cylater

该插件目前仅提供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

ALERT

$.cylater.alert({
	id:'myLaterAlert',
	msg:'这是我做的第一个提示框插件',
	callbackfun:function(data,type){
		alert("type:"+type + " data:"+data);
	}
});
			

CONFIRM

$.cylater.confirm({
	id:'myLaterConfirm',
	msg:'这是我做的第一个提示框插件',
	callbackfun:function(data,type){
		alert("type:"+type + " data:"+data);
	}
});
			

PROMPT

$.cylater.prompt({
	id:'myLaterPrompt',
	prompt:'输入你的姓名',
	callbackfun:function(data,type){
		alert("type:"+type + " data:"+data);
	}
});
			

MESSAGE

$.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 是可选的

LOADING

$.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 是可选的

PAGE

$.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);
	}
});