layer弹html文件,layer弹出示例

layer-更懂你的web弹窗解决方案

html{background-color:#E3E3E3; font-size:14px; color:#000; font-family:'微软雅黑'}

a,a:hover{ text-decoration:none;}

pre{font-family:'微软雅黑'}

.box{padding:20px; background-color:#fff; margin:50px 100px; border-radius:5px;}

.box a{padding-right:15px;}

#about_hide{display:none}

.layer_text{background-color:#fff; padding:20px;}

.layer_text p{margin-bottom: 10px; text-indent: 2em; line-height: 23px;}

.button{display:inline-block; *display:inline; *zoom:1; line-height:30px; padding:0 20px; background-color:#56B4DC; color:#fff; font-size:14px; border-radius:3px; cursor:pointer; font-weight:normal;}

.photos-demo img{width:200px;}

【注意事项】

一、使用时，请把文件夹layer整个放置在您站点的任何一个目录，只需引入layer.js即可，除jQuery外，其它文件无需再引入。

二、如果您的js引入是通过合并处理或者您不想采用layer自动获取的绝对路径，您可以通过layer.config()来配置(详见官网API页)

三、jquery需1.8+

四、更多使用说明与演示，请参见layer官网。

五、使用时请务必保留来源，请勿用于违反我国法律法规的web平台。

六、layer遵循MIT开源协议，将永久性提供无偿服务。

更多示例

使用文档

交流反馈

关于

;!function(){

//开启日期

/*laydate.render({

elem: '#selectdate'

});*/

//开启公历节日

/*laydate.render({

elem: '#selectdate'

,calendar: true

});*/

//自定义重要日

laydate.render({

elem: '#selectdate'

,mark: {

'0-10-14': '生日'

,'0-12-31': '跨年' //每年的日期

,'0-0-10': '工资' //每月某天

,'0-0-15': '月中'

,'2017-8-15': '' //如果为空字符，则默认显示数字+徽章

,'2099-10-14': '呵呵'

}

,done: function(value, date){

if(date.year === 2017 && date.month === 8 && date.date === 15){ //点击2017年8月15日，弹出提示语

alert('这一天是：中国人民抗日战争胜利72周年');

}

}

});

//页面一打开就执行，放入ready是为了layer所需配件(css、扩展模块)加载完毕

/*layer.ready(function(){

//页面加载打开弹出框

layer.open({

type: 2,

title: '欢迎页',

maxmin: true,

area: ['800px', '500px'],

content: 'http://layer.layui.com/test/welcome.html',

end: function(){

layer.tips('Hi', '#about', {tips: 1})

}

});

});*/

//页面渲染完加载

$(function(){

//layer.msg('玩命提示中');

$("#biaoti").blur(function(){

prompt('您确定删除吗？');

/*layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '#biaoti', {

tips: [1, '#3595CC'],

time: 4000

});*/

var reg = /^\d{6,20}$/;

var con = $(this).val();

var result = reg.test(con);

if(result){

layer.tips('标题符合.', '#biaoti', {

tips: [1, '#3595CC'],

time: 4000

});

}else{

layer.tips('标题不符合!', '#biaoti', {

tips: [1, '#ff7f27'],

time: 4000

});

}

});

});

//页面加载完弹出框

// window.onload = function(){

// alert('这是WINDOW的弹出框!');

// }

//点击页面任何位置弹出框

// window.onclick = function(){

// alert('这是WINDOW的弹出框!');

// }

//点击页面任何位置弹出框

var tanchu=document.getElementById('dianjitanchu');

tanchu.onclick = function(){

//alert('这是按钮的弹出框!');

layer.confirm('您是如何看待前端开发？', {

btn: ['重要','奇葩'] //按钮

}, function(){

layer.msg('的确很重要', {icon: 1});

}, function(){

layer.msg('也可以这样', {icon:1})

/*layer.msg('也可以这样', {

time: 20000, //20s后自动关闭

btn: ['明白了', '知道了']

});*/

});

}

//点击关于链接

$('#about').on('click', function(){

layer.alert(layer.v + ' - 贤心出品 sentsin.com');

});

}();