一、問題描述：用parent.layer.open()，遮罩覆蓋了彈出層，位置也有所偏移，排版上title也沒有了，如下圖，圖片是之前在網(wǎng)上找的

image

二，解決辦法：就是結(jié)合layui框架的laytpl 引擎模板使用

1，先在HTML頁面中添加代碼塊

<script id="demo" type="text/html">  <h3>{{ d.title }}</h3>  <ul>  {{#  layui.each(d.list, function(index, item){ }}    <li>      <span>{{ item.modname }}</span>      <span>{{ item.alias }}：</span>      <span>{{ item.site || '' }}</span>    </li>  {{#  }); }}  {{#  if(d.list.length === 0){ }}    無數(shù)據(jù)  {{#  } }}   </ul></script>

2，

 var data = { //數(shù)據(jù)  "title":"Layui常用模塊"  ,"list":[{"modname":"彈層","alias":"layer","site":"layer.layui.com"},{"modname":"表單","alias":"form"}]}var getTpl = document.getElementById('demo').innerHTML;laytpl(getTpl).render(data, function(html){  parent.layer.open({       type:1,       content:html,       area: ['500px', 'auto']      })});

這樣就可以解決上面的顯示問題了，數(shù)據(jù)賦值也是沒有問題的。

3，模板引擎也可以給一個div動態(tài)多次添加內(nèi)容，不是添加一次

#html頁面<div id="view"></div> #jsvar getTp2 = document.getElementById('demo').innerHTML;laytpl(getTp2).render(data, function(html){     $(document.getElementById("view")).append(html)});

以上方法，親測OK