弹层之美
 
layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。

在与同类组件的比较中，layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性，正因如此，越来越多的开发者将媚眼投上了layer（已被7502828人次关注）。layer 甚至兼容了包括 IE6 在内的所有主流浏览器。她数量可观的接口，使得您可以自定义太多您需要的风格，每一种弹层模式各具特色，广受欢迎。当然，这种“王婆卖瓜”的陈述听起来总是有点难受，因此你需要进一步了解她是否真的如你所愿。

layer 采用 MIT 开源许可证，将会永久性提供无偿服务。因着数年的坚持维护，截至到2017年9月13日，已运用在超过 30万 家 Web 平台，其中不乏众多知名大型网站。目前 layer 已经成为国内乃至全世界最多人使用的 Web 弹层解决方案，并且她仍在与 Layui 一并高速发展。

想了解更多请访问layer官网 https://layer.layui.com/


我们开始使用吧,下面是layer应用实例

功能说明：通过点击button按钮，出现弹框，获取select选中的内容并处于编缉状态，然后提交给后台处理

Html code
<div>
    <button class="btn btn-default" onclick="Edit_script_lib()>编辑</button>  
</div>
<div>
    <select class="btn btn-default" id="lib_Id">
        <option>-----------</option>
        {% for lib in libs %}
            <option class={{ lib.remark }} value="{{ lib.libname }}" id="{{ lib.id }}>{{ lib.libname }}</option>
        {% endfor %}
    </select>
</div>


JScript code
首先引用layer.js
<script src="/static/js/layer/layer.js"></script>
function Edit_script_lib() {
    edit_lib_name = $("#lib_Id").val();
    edit_lib_remark = $("#lib_Id").find("option:selected").attr("class");
    lib_id = $("#scriptlibId").find("option:selected").attr("id");
    layer.open({
        type: 1,
        area: ['550px', '360px'],
        shadeClose: true, //点击遮罩关闭
        content: '<div>\n' +
        '    <div class="form-group" style="margin-top: 20px;margin-left: 130px">\n' +
        '        <label style="float: left;margin-top: 7px">脚本库名称 ：</label>\n' +
        '        <input type="text" maxlength="128" style="width: 200px;" class="form-control" id="lib_name" value='+edit_lib_name+'>\n' +
        '    </div>\n' +
        '    <div class="form-group" style="margin-top: 20px">\n' +
        '        <label style="float: left;margin-left: 130px">脚本库说明 ：</label>\n' +
        '        <input maxlength="256" style="width: 200px;" class="form-control" id="lib_remark" value='+edit_lib_remark+'></input>\n' +
        '    </div>\n' +
        '    <div class="form-group">\n' +
        '        <button type="button" class="btn btn-success" onclick="Sumbit_script_lib()" style="width: 200px;margin-top: 50px;margin-left: 210px">创建</button>\n' +
        '    </div>\n' +
        '</div>'
    })
}


function Submit_edit_script_lib() {
    var name = $("#lib_name").val();
    var remark = $("#lib_remark").val();
    $.ajax({
        type: "post",
        url: "/ops/edit_script_lib/",
        dataType: 'json',
        data: {
            "lib_id": lib_id,
            "lib_name": name,
            "lib_remark": remark
        }
    });
    layer.closeAll();
}