mirror of https://github.com/layui/layer
83 lines
2.6 KiB
HTML
83 lines
2.6 KiB
HTML
|
||
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>layer-更懂你的web弹窗解决方案</title>
|
||
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
|
||
<script src="../src/layer.js"></script>
|
||
|
||
<style>
|
||
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;}
|
||
.layer-photos-demo img{width:200px;}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="box">
|
||
<div>
|
||
<button id="alert">alert</button>
|
||
<button id="confirm">confirm</button>
|
||
<button id="msg">msg</button>
|
||
<button id="Notice">Notice</button>
|
||
</div>
|
||
</div>
|
||
<!-- <div id="layer-photos-demo" class="layer-photos-demo">
|
||
|
||
</div>
|
||
<div class="box" style="text-align:center">
|
||
<a href="http://layer.layui.com/" target="_blank">更多示例</a>
|
||
<a href="http://www.layui.com/doc/modules/layer.html" target="_blank">使用文档</a>
|
||
<a href="http://fly.layui.com/" id="suggest">交流反馈</a>
|
||
<a href="javascript:;" id="about">关于</a>
|
||
</div> -->
|
||
|
||
<script>
|
||
;!function(){
|
||
|
||
layer.config({
|
||
extend: 'element/style.css', //加载新皮肤
|
||
skin: 'layer-element' //一旦设定，所有弹层风格都采用此主题。
|
||
});
|
||
|
||
layer.photos({
|
||
photos: '#layer-photos-demo'
|
||
});
|
||
//页面一打开就执行，放入ready是为了layer所需配件（css、扩展模块）加载完毕
|
||
|
||
//关于
|
||
$('#about').on('click', function(){
|
||
layer.alert(layer.v + ' - 贤心出品 sentsin.com');
|
||
});
|
||
$('#alert').on('click',function(){
|
||
layer.alert('内容',{anim:0,icon: 1});//, {icon: 1}
|
||
});
|
||
$('#confirm').on('click',function(){
|
||
layer.confirm('您是如何看待前端开发？', {
|
||
btn: ['重要','奇葩'] //按钮
|
||
}, function(){
|
||
layer.msg('的确很重要', {icon: 1});
|
||
}, function(){
|
||
layer.msg('也可以这样', {
|
||
time: 20000, //20s后自动关闭
|
||
btn: ['明白了', '知道了']
|
||
});
|
||
});
|
||
});
|
||
$('#msg').on('click',function(){
|
||
layer.msg('内容',{anim:3,icon: 1})//, {icon: 1}
|
||
});
|
||
$('#Notice').on('click',function(){
|
||
layer.notice('内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容',{title:'提示',anim:7,icon: 1})//, {icon: 1}
|
||
});
|
||
|
||
}();
|
||
</script>
|
||
</body>
|
||
</html> |