當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

layui 子页面写弹出框覆盖父页面，以及给弹框中的表单赋值

發布時間：2023/12/2 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 layui 子页面写弹出框覆盖父页面，以及给弹框中的表单赋值小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

咋說呢，因為對 layui 不太熟悉，這個彈出框搞了好久，看了好多解決方案，大致嘗試了一下其中幾種，在坑中無法自拔。。。總之終于搞出來了，在這里分享一下我的筆記。

著急的直接戳這里看解決代碼。

嘗試

1、直接在子頁面寫彈框代碼及彈框定位樣式

一開始我就直接在 子頁面 上寫的彈框代碼和樣式，然后想定位到父頁面上。因為position:absolute 定位要找它最近的父級定位元素，如果沒有寫，就會找到 html，而 iframe 子頁面就是一個新的 html 文檔，所以沒辦法定位到父頁面上。

子頁面

2、父頁面放空div，覆蓋整個父頁面

看到帖子說子父頁面放一個彈框空div，嘗試之后發現：這個遮罩會覆蓋整個頁面，但是也把彈框中的內容遮擋住了，子頁面 z-index 設置 99999 也不管用。目前我還沒找到解決辦法，有解決的希望能告訴我一下，嘿嘿。

父頁面

子頁面，點擊新增按鈕的時候出現彈框：

$("#addBtn").on("click",function(){$("#formDiolog").show();parent.diologOpen(); })

3、使用 $.load() 加載彈框內容

經過上面的試驗之后，就想把子頁面寫的 DOM 加載到父級上，于是想到了 jQuery 中的 $.load() 方法。

子頁面

<div id="diolog"> <div class="layui-form" lay-filter="formDiolog" id="formDiolog">...<div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button><button class="layui-btn layui-btn-primary diologCloseBtn">取消</button></div></div></div> </div><script> //新增，調用父頁面封裝好的打開彈框的方法$(".addBtn").on("click", function(){//第一個參數：在父頁面引用當前頁面時的路徑，第二個參數：新增為false，//第三個是回調函數,返回表單中輸入框的字段和值。parent.loadDiolog("../views/industry/index.html", null, function(params){console.log(params); $.ajax({type: "POST",data: params})})})//監聽工具條，表格中的彈框table.on('tool(table)', function(obj){var data = JSON.parse( JSON.stringify(obj.data) );if(obj.event === 'edit'){ //編輯 //把點擊的哪一行的數據傳給父級中的方法parent.loadDiolog("../views/industry/index.html", data, function(params){console.log(params)})}}) </script>

父頁面

效果確實出來了，但是違背了我一開始不想寫每個頁面路徑的想法，除此之外，使用 load 加載 DOM，在性能方面不如 iframe 加載。

關于iframe與$.load()哪個更好
iframe可以直接加載頁面，但是要付出降低搜索引擎搜索效率的代價，它引入靜態文件的方式是完全獨立的，簡單意思就是，在頁面一(父級頁面)用iframe加載了頁面二(子級頁面)，頁面二的靜態文件不用在頁面一上加載，降低了每個頁面的加載負荷，增加了每個頁面的加載效率；
而**$.load()是與它父級頁面互相聯動的**，如果你想要load某個頁面，那么你就要在它的父級頁面中引入子級頁面的css和js包來控制子頁面的樣式和效果，這樣會增加父級頁面的加載負荷，使得父級網頁加載變慢，整體影響用戶體驗性。

解決

關于子頁面寫彈框覆蓋父頁面，看到很多都是使用 layui 中的彈框，但是基本上都是再引入 iframe 層，對于這種表格和彈框較多的后面管理項目，因為要引入每個表單文件的路徑，不太實用。

于是去看了一下官網。最終還是打算用 layui.layer 去寫。。。

在子頁面寫彈框內容：

<body>...<div id="diolog"> <div class="layui-form" lay-filter="formDiolog" id="formDiolog"><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">行業標識</label><div class="layui-input-inline"><input type="text" name="industryId" autocomplete="off" class="layui-input disabledDom" ></div></div><div class="layui-inline"><label class="layui-form-label">行業名稱</label><div class="layui-input-inline"><input type="text" name="industryName" autocomplete="off" class="layui-input"></div></div></div></div></body><script>$(".addBtn").on("click", function(){ //點擊新增按鈕，出現彈框diologOpen({ title: "新增行業信息" }, function (data) { //調用打開彈框的方法console.log(data); //data 為彈出框表單中的字段和值，在這里調用新增的接口$.ajax({type: "POST",data: data//....})})});//監聽工具條table.on('tool(table)', function(obj){var data = JSON.parse( JSON.stringify(obj.data) ); //賦值時注意深淺拷貝if(obj.event === 'edit'){ //編輯 //點擊編輯按鈕時，需要給彈框傳的值var formData = {title: "編輯行業信息" ,formData: data}diologOpen(formData, function (data) { //調用打開彈框的方法console.log(data); //data 為彈出框表單中的字段和值，在這里調用新增的接口})});// 封裝彈出框，給表單賦值. //formData是傳給彈框的值，是一個對象，callback回調函數，是點擊彈框中的確認要做的操作。 function diologOpen(data, callback) { layui.use(['layer','form'], function(){var form = layui.form;var index = parent.layer.open({type: 1, //0信息框，默認；1頁面層；2iframe層；3加載層；4tips層title: formData.title,content: $("#diolog").html(), //注意后面的.html()btn: ['確認', '取消'],success: function(layero){ //打開彈框的回調// 攜帶兩個參數，分別是layero當前層DOM，index當前層索引if( data.formData ){ //有數據時為修改彈框，修改彈框的表單賦值layero.find(':input').each(function(){ //給表單的輸入框賦值，注意 input 前面的:不能省$(this).val( data.formData[$(this).attr("name")] );});layero.find("input.disabledDom").addClass("noDrap"); //修改操作通常標識是不能改的layero.find("input.disabledDom").attr("disabled","disabled"); //禁用輸入框form.render();} },yes: function (index, layero) { //點擊確認按鈕后，把輸入框的數據導出到回調函數中。//兩個參數index當前層索引、layero當前層DOM對象var data = {}layero.find(':input').each(function(){data[$(this).attr("name")] = $(this).val();})callback(data); parent.layer.close(index); //關閉彈框}});}) } </script>

父頁面：

注意：

因為彈框加到父級上了，所以彈框中的樣式要寫在父級的樣式文件中。

表單賦值/取值有個 form.val() 方法，這里使用會沒有效果，原因也是因為彈框中內容被加到父級上了，而表單賦值是寫在子頁面上的，所以在子頁面做表單賦值操作時要手動去寫賦值操作。

總結

以上是生活随笔為你收集整理的layui 子页面写弹出框覆盖父页面，以及给弹框中的表单赋值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： iframe 高度根据子页面来确定
下一篇：鼠标滚轮事件及解决滚轮事件多次触发问题