layui.layer 弹层组件文档

var options=$("#aa option:selected");
if(options.val() == "请选择"){
layer.alert('至少选择一个消息类型！',{icon: 5,area:'500px'});
return;

}

var params = $("#addUsertable").serialize();

if($('#subType').val()=='add'){
sendRequest(basePath + '/a/b.do',params, function(data) {
if(data.data){
layer.open({
  content: '新增成功！'
  ,icon: 6,area:'500px',title:'提示',
  btn: ['继续添加', '返回']
  ,yes: function(index, layero){
    //按钮【按钮一】的回调
  layer.closeAll('dialog');
  document.getElementById("addUsertable").reset();
  }
  ,btn2: function(index, layero){
  layer.closeAll('dialog');
  $('#add-colleague').modal('hide');
  queryList();
  }
  
});
}else{
layer.alert('新增失败！',{icon: 5,area:'500px'});
};
$(".layui-layer-setwin .layui-layer-close").click(function() {
$('.mask', parent.document).hide();
$('#add-colleague').modal('hide');
$(".modal-backdrop").hide();
});
$(".layui-layer-btn1").click(function() {
$('.mask', parent.document).hide();
$(".modal-backdrop").hide();
});
});
$(".layui-layer-setwin .layui-layer-close").click(function() {
$('.mask', parent.document).hide();
$(".modal-backdrop").hide();
});
$(".layui-layer-btn1").click(function() {
$('.mask', parent.document).hide();
$(".modal-backdrop").hide();
});
}

////////////////////////////

function delBanner(id,_this){
layer.confirm('确定删除？', {icon: 0,area:'500px',title:'提示'},
function() {
layer.closeAll('dialog');
sendRequest(basePath + "/a/b.do", {'id':id}, function(data){
if(data=='0'){
$(_this).parent().parent().parent().remove();
}
});
});
}

//////////////////////////

作为独立组件使用 layerlayui.code
 
引入好layer.js后，直接用即可
<script src="layer.js"></script>
<script>
layer.msg('hello'); 
</script>
     

 
在 layui 中使用 layerlayui.code
  
layui.use('layer', function(){
  var layer = layui.layer;
  
  layer.msg('hello');
});              

 

1. /!*
2. 如果是页面层
3. */
4. layer.open({
5. type: 1,
6. content: '传入任意的文本或html' //这里content是一个普通的String
7. });
8. layer.open({
9. type: 1,
10. content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
11. });
12. //Ajax获取
13. $.post('url', {}, function(str){
14. layer.open({
15. type: 1,
16. content: str //注意，如果str是object，那么需要字符拼接。
17. });
18. });
19. /!*
20. 如果是iframe层
21. */
22. layer.open({
23. type: 2,
24. content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
25. });
26. /!*
27. 如果是用layer.open执行tips层
28. */
29. layer.open({
30. type: 4,
31. content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
32. });

1. ayer.confirm('纳尼？', {
2. btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
3. ,btn3: function(index, layero){
4. //按钮【按钮三】的回调
5. }
6. }, function(index, layero){
7. //按钮【按钮一】的回调
8. }, function(index){
9. //按钮【按钮二】的回调
10. });
12. //eg2
13. layer.open({
14. content: 'test'
15. ,btn: ['按钮一', '按钮二', '按钮三']
16. ,yes: function(index, layero){
17. //按钮【按钮一】的回调
18. }
19. ,btn2: function(index, layero){
20. //按钮【按钮二】的回调
22. //return false 开启该代码可禁止点击该按钮关闭
23. }
24. ,btn3: function(index, layero){
25. //按钮【按钮三】的回调
27. //return false 开启该代码可禁止点击该按钮关闭
28. }
29. ,cancel: function(){
30. //右上角关闭回调
32. //return false 开启该代码可禁止点击该按钮关闭
33. }
34. });