layer模態框之間相互操作

場景是這樣的,資源列表頁面點擊編輯,彈出編輯模態框,編輯模態框中點擊圖標區域,在資源列表中再彈出一個新的模態框,用於選擇圖標,點擊任意一個圖標后,修改編輯頁面的圖標和文字;

解決方案

1. 在父頁面中配置第一個模態框的id屬性

   let index = layui.layer.open({
       area: ['750px', '450px'],
       maxmin: true,
       type: 2,
       title: '修改資源',
       id: 'editRoot',
       content: '/resource/edit/' + resourceId
   });
   

2. 在第二個模態框js方法中獲取第一個模態框的id

下面的editRoot就是上面設置的id,需要注意的是layer組件會進行自己的封裝,指定的id不是iframe的id,是外面div的id

```
let id =parent.window.$('#editRoot>iframe:first').attr('id');//獲得iframeid 格式是 "layui-layer-iframe5" 后面的數字    就是index
```

3. 根據id獲得iframe的選擇器對象

   let iframe = parent.$('#'+id).contents();//獲得iframe的選擇器對象
   

4. 使用find()繼續使用選擇器,選擇下級dom進行后續操作

   iframe.find('#icon').val(iconName);
   iframe.find('#iconImg').attr('src',imgSrc);