Layui - 弹出层 layer

模块:layui.use('layer', function(){ var layer = layui.layer; });

参考:https://www.layui.com/doc/modules/layer.html

弹层:

类型: alert、confirm、msg、load、tips、page、iframe、prompt、tab、photos

示例:

// 普通信息框:蒙层弹窗
layer.alert( '你好' );


// 询问框:蒙层弹窗+选择
layer.confirm( 
  '你好',
  { btn:['按钮1','按钮2'] },
  function(){ layer.msg( '由按钮1触发', { icon:1 } ) },
  function(){ layer.msg( '由按钮2触发 20s后自动关闭', 
    { time:20000, btn:['按钮3','按钮4'] }) } );


// 提示框:非蒙层提示窗
layer.msg( '提示' );


// 加载层:蒙层弹窗+加载中时提示窗
layer.load(icon,options); // icon取0-2即风格(0可不写),


// tips层:位置基于页面元素的提示框
layer.tips( '提示', this, {tips:1} );


// 蒙层弹窗+Page (area为弹窗尺寸, content为弹窗内容)
layer.open( { 
  title:'页面层',
  type:1,
  shadeClose:true,
  area:['80%','300px'],
  content:'<div style="">任意HTML</div>' } );


// 蒙层弹窗+Iframe
layer.open( { 
  type:2,
  content:'http://fly.layui.com/',
  shadeClose:true,
  area:['100%','80%'],
  maxmin:true } );


// 输入层:蒙层弹窗+可输入
layer.prompt( {title:'输入内容1并确认', formType:1 }, 
  function(pass,index){
    layer.close(index); // 关闭特定弹层,开启为 layer.open(),如上
                        // layer.clossAll() 全部关闭,closeAll('msg') 关闭msg类型弹层
    layer.prompt( { title:'输入内容2并确认', formeType:2 },
      function(text,index){
        layer.close(index),
        layer.msg('内容1:'+pass+'内容2:'+text) } ) } );


// tab层:蒙层弹窗+tab标签
layer.tab( { 
  area:['100%','80%'],
  tab:[{title:'TAB1', content:'<div style="">内容1</div>'},
       {title:'TAB2', content:'<div style="">内容2</div>'} ] } );


// 相册层:图片弹窗(示例路径参考模板,使用json需注意photo数据格式)
$.getJSON('./dist/layuiadmin/json/layer/photos.js', function(json){
  layer.photos({ photos: json
  , anim: 5
  // 0-6选择 指定弹出图片动画类型 默认随机(3.0之前的版本用shift参数)

}); });

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页