layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。
在与同类组件的比较中,layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能,且格外注重性能的提升、易用和实用性,正因如此,越来越多的开发者将媚眼投上了layer(已被7890494人次关注)。layer 甚至兼容了包括 IE6 在内的所有主流浏览器。她数量可观的接口,使得您可以自定义太多您需要的风格,每一种弹层模式各具特色,广受欢迎。当然,这种“王婆卖瓜”的陈述听起来总是有点难受,因此你需要进一步了解她是否真的如你所愿。
http://layer.layui.com/
<div id="J_NewAddressBtn">dd</div>
<!--弹窗增加地址-->
<div style="display:none;" id="show_add">
<div style="padding:20px;">
内容
</div>
</div>
<script src="__ROOT__/static/js/layui/layui.js" charset="utf-8"></script>
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
// layer.msg('Hello World');
});
//弹出一个页面层,增加内容
$('#J_NewAddressBtn').on('click', function(){
layer.open({
type: 1,
title: '增加新地址',
area: ['600px', '360px'],
shadeClose: true, //点击遮罩关闭
content: $("#show_add").html()
});
});
</script>
徐多蔚 项目亲测。