layui弹出框

layui弹出框的简单使用

layer.open({})

• layer.confim({})

---

---

可以直接复制粘贴的方法

引入layui.css 和 layui.js

<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.js">script>

body

<input type="button" value="弹出" id="btn"/>
<div id="divid" style="display:none">testdiv>

js

<script>
//弹出框
$('#btn').on('click', function() {
	layui.use('layer', function(){
        var layer = layui.layer;
        //页面层
	  	layer.open({
		  type: 1,
		  title: false,
		  closeBtn: 1,
		  area: ['400px','200px'],
//		  skin: 'layui-layer-nobg', //没有背景色
		  shadeClose: true,
		  content: $('#divid')
	    });
    });
	  
}
</script>

---

---

• 如果想自定义按钮和弹出框的宽高，使用layer.open ()方法

---

layer.open()

• 作为独立组件使用
  引入layer.js 和 jquery.min.js

 <script src="layer.js">script>
 <script src="jquery.min.js">script>

• layui 模块化使用:
  官网下载layui包，整个包放入项目中
  引入layui.css和layui.js

 <script src="layer.js">script>
 <script src="jquery.min.js">script>

type:1 页面层

layer.open({
	 type: 1                      //弹出框类型   1:页面层     2:ifream层      4:用layer.open执行tips层
	,title:'layer弹出框'     //弹出框的标题
	,closeBtn: 1             //关闭按钮样式：1234
	,btnAlign:'c'             //按钮居中方式  'l'      'r'
	,area: ['650px','300px']           //弹出层的宽高
	,align:'center'         //居中方式      
	,shadeClose: true         //点击弹层外区域是否可以关闭
	,content:'任意文本或html'
//	,content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
})

type:2 iframe层

layer.open({
  type: 2, 
  content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
});

添加关闭按钮

layer.open({
  content: 'test'
  ,btn: ['按钮一', '按钮二', '按钮三']
  ,yes: function(index, layero){
    //按钮【按钮一】的回调
  }
  ,btn2: function(index, layero){
    //按钮【按钮二】的回调
    
    //return false 开启该代码可禁止点击该按钮关闭
  }
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
    
    //return false 开启该代码可禁止点击该按钮关闭
  }
  ,cancel: function(){ 

    //return false 开启该代码可禁止点击该按钮关闭
  }
});

---

layer.confirm()

layer.confirm('纳尼？', {
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});

更多资料点击查看www.foryh.com