layui框架使用parent.layer.open時type爲1時出現顯示問題的解決辦法

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

二，解決辦法：就是結合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){ }}
    無數據
  {{#  } }} 
  </ul>
</script>

2，

var data = { //數據
  "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']
      })
});

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

3，模板引擎也可以給一個div動態多次添加內容，不是添加一次

#html頁面
<div id="view"></div>

#js
var getTp2 = document.getElementById('demo').innerHTML;
laytpl(getTp2).render(data, function(html){
     $(document.getElementById("view")).append(html)
});

以上方法，親測OK