layer,一个可以让你想到即可做到的javascript弹窗（层）解决方案

             1 /!*
 2 如果是页面层
 3  */
 4layer.open({
 5     type: 1, 
 6     content: ‘传入任意的文本或html‘ //这里content是一个普通的String 7});
 8layer.open({
 9     type: 1,
10     content: $(‘#id‘) //这里content是一个DOM11});
12//Ajax获取13 $.post(‘url‘, {}, function(str){
14    layer.open({
15         type: 1,
16         content: str //注意，如果str是object，那么需要字符拼接。17    });
18});
1920 /!*
21 如果是iframe层
22  */
23layer.open({
24     type: 2, 
25     content: ‘http://sentsin.com‘ //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: [‘http://sentsin.com‘, ‘no‘]26}); 
2728 /!*
29 如果是用layer.open执行tips层
30  */
31layer.open({
32     type: 4,
33     content: [‘内容‘, ‘#id‘] //数组第二项即吸附元素选择器或者DOM34 }); 

             1
            //
            单个使用
             2
            layer.open({

             3     skin: ‘demo-class‘
 4});
 5 6//全局使用。即所有弹出层都默认采用，但是单个配置skin的优先级更高 7layer.config({
 8     skin: ‘demo-class‘
 9})
1011//CSS 12 body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
13 body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
14 body .demo-class .layui-layer-btn a{background:#333;}
15 body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
16…
17 加上body是为了保证优先级。你可以借助Chrome调试工具，定义更多样式控制层更多的区域。   

            1
            //
            eg1
            2 layer.alert(‘酷毙了‘, {icon: 1});
34//eg25 layer.msg(‘不开心。。‘, {icon: 5});
67//eg38 layer.load(1); //风格1的加载

             1
            //
            eg1           
             2 layer.confirm(‘纳尼？‘, {
 3     btn: [‘按钮一‘, ‘按钮二‘, ‘按钮三‘] //可以无限个按钮 4     ,btn3: function(index, layero){
 5//按钮【按钮三】的回调 6    }
 7 }, function(index, layero){
 8//按钮【按钮一】的回调 9 }, function(index){
10//按钮【按钮二】的回调11});
1213//eg214layer.open({
15     content: ‘test‘
16     ,btn: [‘按钮一‘, ‘按钮二‘, ‘按钮三‘]
17     ,yes: function(index, layero){ //或者使用btn118//按钮【按钮一】的回调19     },cancel: function(index){ //或者使用btn220//按钮【按钮二】的回调21     },btn3: function(index, layero){
22//按钮【按钮三】的回调23    }
24 });

            1
            layer.open({

            2     content: ‘测试回调‘,
3     success: function(layero, index){
4        console.log(layero, index);
5    }
6 });      

            1
            layer.open({

            2     content: ‘测试回调‘,
3     yes: function(index, layero){
4//do something5         layer.close(index); //如果设定了yes回调，需进行手工关闭6    }
7 });     

            1
            layer.config({

            2     path: ‘/res/layer/‘ //layer.js所在的目录，可以是绝对目录，也可以是相对目录3});
4//这样的话，layer就会去加载一些它所需要的配件，比如css等。  5//当然，你即便不用seajs或者requirejs，也可以通过上述方式设定路径    

            1 <script src="?a.js&layer.js" merge="true">
23这样的话，layer就不会去自动去获取路径，但你需要通过以下方式来完成初始化的配置
4layer.config({
5     path: ‘/res/layer/‘ //layer.js所在的目录，可以是绝对目录，也可以是相对目录6 });

             1
            layer.config({

             2     extend: ‘extend/layer.ext.js‘, //注意，目录是相对layer.js根目录。如果加载多个，则 [a.js, b.js, …] 3     shift: 1, //默认动画风格 4     skin: ‘layui-layer-molv‘ //默认皮肤 5    …
 6});
 7 8//除此之外，extend还允许你加载css。这对于layer的第三方皮肤有极大的帮助，如： 9layer.config({
10    extend: [
11         ‘extend/layer.ext.js‘,
12         ‘skin/layer-ext-myskin/style.css‘ //layer-ext-myskin即是你拓展的皮肤文件13    ]
14});
1516//扩展css的规范：您必须在你扩展中的css文件加上这段17 html #layui_layer_skinlayer-ext-myskinstylecss{display:none; position: absolute; width:1989px;}
18规则就是：html #layui_layer_skin{文件夹名}{文件名}css
19 skin名以文件夹名为标准。

            1
            //
            页面一打开就执行弹层
            2 layer.ready(function(){
3     layer.msg(‘很高兴一开场就见到你‘);
4 });  

            1
            var index = layer.open({
2     content: ‘test‘
3});
4//拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数。 

             1
            //
            eg1
             2 layer.alert(‘只想简单的提示‘);                
 3//eg2 4 layer.alert(‘加了个图标‘, {icon: 1}); //这时如果你也还想执行yes回调，可以放在第三个参数中。 5//eg3 6 layer.alert(‘有了回调‘, function(index){
 7//do something 8 9    layer.close(index);
10 });     

             1
            //
            eg1
             2 layer.confirm(‘is not?‘, {icon: 3, title:‘提示‘}, function(index){
 3//do something 4 5    layer.close(index);
 6});
 7//eg2 8 layer.confirm(‘is not?‘, function(index){
 9//do something1011    layer.close(index);
12 });    

             1
            //
            eg1
             2 layer.msg(‘只想弱弱提示‘);
 3//eg2 4 layer.msg(‘有表情地提示‘, {icon: 6}); 
 5//eg3 6 layer.msg(‘关闭后想做些什么‘, function(){
 7//do something 8}); 
 9//eg10 layer.msg(‘同上‘, {
11     icon: 1,
12     time: 2000 //2秒关闭（如果不配置，默认是3秒）13 }, function(){
14//do something15 });   

            1
            //
            eg1
            2
            var index = layer.load();
3//eg24var index = layer.load(1); //换了种风格5//eg36var index = layer.load(2, {time: 10*1000}); //又换了种风格，并且设定最长等待10秒 78//关闭9 layer.close(index);  

             1
            //
            eg1
             2 layer.tips(‘只想提示地精准些‘, ‘#id‘);
 3//eg 2 4 $(‘#id‘).on(‘click‘, function(){
 5var that = this;
 6     layer.tips(‘只想提示地精准些‘, that); //在元素的事件回调体中，follow直接赋予this即可 7});
 8//eg 3 9 layer.tips(‘在上面‘, ‘#id‘, {
10     tips: 1
11 });

             1
            //
            当你想关闭当前页的某个层时
             2
            var index = layer.open();
 3var index = layer.alert();
 4var index = layer.load();
 5var index = layer.tips();
 6//正如你看到的，每一种弹层调用方式，都会返回一个index 7 layer.close(index); //此时你只需要把获得的index，轻轻地赋予layer.close即可 8 9//当你在iframe页面关闭自身时10var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引11 parent.layer.close(index); //再执行关闭     

            1 layer.closeAll(); //疯狂模式，关闭所有层2 layer.closeAll(‘dialog‘); //关闭信息框3 layer.closeAll(‘page‘); //关闭所有页面层4 layer.closeAll(‘iframe‘); //关闭所有的iframe层5 layer.closeAll(‘loading‘); //关闭加载层6 layer.closeAll(‘tips‘); //关闭所有的tips层     

            1
            //
            重新给指定层设定width、top等
            2
            layer.style(index, {

            3     width: ‘1000px‘,
4     top: ‘10px‘
5 });     

             1
            layer.open({

             2     type: 2,
 3     content: ‘test/iframe.html‘,
 4     success: function(layero, index){
 5var body = layer.getChildFrame(‘body‘, index);
 6var iframeWin = window[layero.find(‘iframe‘)[0][‘name‘]]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method(); 7         console.log(body.html()) //得到iframe页的body内容 8         body.find(‘input‘).val(‘Hi，我是从父页来的‘)
 9    }
10 });   

            1
            //
            假设这是iframe页
            2
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引3 parent.layer.close(index); //再执行关闭     

             1
            //
            通过这种方式弹出的层，每当它被选择，就会置顶。
             2
            layer.open({

             3     type: 2,
 4     shade: false,
 5     area: ‘500px‘,
 6     maxmin: true,
 7     content: ‘http://www.layui.com‘,
 8     zIndex: layer.zIndex, //重点1 9     success: function(layero){
10         layer.setTop(layero); //重点211    }
12 });    

            1
            layer.config({

            2     extend: ‘extend/layer.ext.js‘
3 });   

             1
            //
            prompt层新定制的成员如下
             2
            {

             3     formType: 1, //输入框类型，支持0（文本）默认1（密码）2（多行文本） 4     value: ‘‘, //初始时的值，默认空字符 5     maxlength: 140, //可输入文本的最大长度，默认500 6}
 7 8//例子1 9 layer.prompt(function(value, index, elem){
10     alert(value); //得到value11    layer.close(index);
12});
13//例子214layer.prompt({
15     formType: 2,
16     value: ‘初始值‘,
17     title: ‘请输入值‘
18 }, function(value, index, elem){
19     alert(value); //得到value20    layer.close(index);
21 });

             1
            layer.tab({

             2     area: [‘600px‘, ‘300px‘],
 3    tab: [{
 4         title: ‘TAB1‘, 
 5         content: ‘内容1‘
 6    }, {
 7         title: ‘TAB2‘, 
 8         content: ‘内容2‘
 9    }, {
10         title: ‘TAB3‘, 
11         content: ‘内容3‘
12    }]
13 });            

$.getJSON(‘/jquery/layer/test/photos.json‘, function(json){
    layer.photos({
        photos: json
    });
});

//而返回的json需严格按照如下格式：
{
    "title": "", //相册标题
    "id": 123, //相册id
    "start": 0, //初始显示的图片序号，默认0
    "data": [   //相册包含的图片，数组格式        {
            "alt": "图片名",
            "pid": 666, //图片id
            "src": "", //原图地址
            "thumb": "" //缩略图地址        }
    ]
}

             1
            //
            HTML示例
             2 <div id="layer-photos-demo" class="layer-photos-demo">
 3     <img layer-pid="图片id，可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
 4     <img layer-pid="图片id，可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
 5 </div>
 6 7//调用示例 8 layer.ready(function(){ //为了layer.ext.js加载完毕再执行 9    layer.photos({
10         photos: ‘#layer-photos-demo‘
11    });
12 });     

            1
            layer.photos({

            2     photos: json/选择器,
3     tab: function(pic, layero){
4         console.log(pic) //当前图片的一些信息5    }
6 });