layui 弹出层

通过阅读layui官方文档，发现layui的弹出层可以分两种使用的场景。一种是在layui中作为模块调用，另一种其实是大家很久以前就使用过的layer.js。它配合jquery一起使用。

在模块中调用弹出层是这样的

layui.use('layer', function(){
  var layer = layui.layer;
  
  layer.open({content: ''})
});  

layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）

今天在页面里引用了一个弹出层，是页面层，type为1，然后发现弹出层被遮罩层挡住了，然后修改css的index属性，发现并没有效果。然后重新去看官方文档

layer.open({
  type: 1,
  content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});

官方文档中有一段是这样的。提示弹出层最好放在body最外层，由于一些特殊原因，我无法将弹出层放在最外层，我就想通过其他方式来改变遮罩层的dom节点，把遮罩层和弹出层放在同一个父元素中。百度了一下过来有弹出层执行成功的回调方法，success方法。然后通过success方法把遮罩层放到和弹出层同一父节点下。

success:function(laydom){
var shadow=$('.layui-layer-shade');
shadow.appendTo(laydom.parent())
}

 

转载于:https://my.oschina.net/u/3042592/blog/1592289