详解Layer弹出层样式

<script src="jQuery的路径"></script>
<script src="layer.js的路径"></script>
<script>
//弹出一个页面层
$('#test2').on('click', function(){
 layer.open({
 type: 1,
 area: ['600px', '360px'],
 shadeClose: true, //点击遮罩关闭
 content: '\<\div style="padding:20px;">自定义内容\<\/div>'
 });
});
</script>

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

//eg1  
layer.confirm('纳尼？', {
 btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
 ,btn3: function(index, layero){
 //按钮【按钮三】的回调
 }
}, function(index, layero){
 //按钮【按钮一】的回调
}, function(index){
 //按钮【按钮二】的回调
});
//eg2
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.open({
 content: '测试回调',
 success: function(layero, index){
  console.log(layero, index);
 }
});

layer.open({
 content: '测试回调',
 yes: function(index, layero){
  //do something
  layer.close(index); //如果设定了yes回调，需进行手工关闭
 }
});

cancel: function(index, layero){
 if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
  layer.close(index)
 }
 return false;
}

layer.ready(callback) - 初始化就绪

//页面一打开就执行弹层
layer.ready(function(){
 layer.msg('很高兴一开场就见到你');
}); 
layer.close(index) - 关闭特定层(比较重要)

//当你想关闭当前页的某个层时
var index = layer.open();
var index = layer.alert();
var index = layer.load();
var index = layer.tips();
//正如你看到的，每一种弹层调用方式，都会返回一个index
layer.close(index); //此时你只需要把获得的index，轻轻地赋予layer.close即可
//如果你想关闭最新弹出的层，直接获取layer.index即可
layer.close(layer.index); //它获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的
//当你在iframe页面关闭自身时
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭 
layer.getChildFrame(selector, index) - 获取iframe页的DOM

 layer.open({
  type: 2,
  content: 'test/iframe.html',
  success: function(layero, index){
   var body = layer.getChildFrame('body', index);
   var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
   console.log(body.html()) //得到iframe页的body内容
   body.find('input').val('Hi，我是从父页来的')
  }
 });

//假设这是iframe页
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭