PHP結(jié)合layer處理彈出窗口提交的值

lwx12525 發(fā)布于2019-06-27 16:57 / 1212人閱讀

摘要：為了更加優(yōu)雅的彈出子窗口，我們使用了這一款優(yōu)秀的插件。所以等同于表單提交到頁面自身，只不過是展示在了自身的里。

轉(zhuǎn)載自：http://www.884358.com/php-layer/

在開發(fā)中經(jīng)常會遇到點擊按鈕彈出展示表單，在表單中填寫信息后，點擊保存，最后返回列表頁的情況。

我們想實現(xiàn)的比較友好的效果通常是：用戶點擊按鈕彈出子窗口，填寫完子窗口中的表單信息后，點擊子窗口中的保存按鈕，頁面提示保存成功，并關(guān)閉子窗口，最后刷新父頁面。

為了更加優(yōu)雅的彈出子窗口，我們使用了layer這一款優(yōu)秀的jQuery插件。在使用過程中，可以很方便的彈出我們想要的頁面，例如表單填寫頁面。
例如如下頁面：




     彈窗測試

點擊“點擊彈出窗口”按鈕，頁面會彈出子窗口顯示http://127.0.0.1/test/layer/f...的頁面內(nèi)容，form.php的代碼如下：

parent.parent.layer.closeAll();parent.parent.layer.msg("添加成功，頁面正在刷新");parent.parent.setTimeout("refresh()",2000);";
    die;
}
?>



     彈窗測試 
    






    
        
            姓名
            
        
        
            年齡

注意表單form的target屬性是指向的本頁面的iframe，target的名稱即為iframe的name。當填寫了表單上的信息后，點擊提交按鈕，頁面會將form表單中的信息提交到iframe中，由于iframe沒有指定src屬性，所以iframe的地址是頁面自己，同時設(shè)置了display:none，所以是不可見的（為了便于觀察效果，你也可以暫時先把display:none刪除）。所以等同于表單提交到頁面自身，只不過是展示在了自身的iframe里。自身的php代碼里識別到了post過來的數(shù)據(jù)，則會輸出一句js代碼，js代碼的目的是關(guān)閉頂級父窗口的layer彈出窗，并在頂層父窗口中顯示提示信息，最后讓頂級父頁面在兩秒鐘后刷新自己。

GPU云服務(wù)器云服務(wù)器 layer彈出窗口 php彈出窗口插件 php生成彈出窗口 layer 彈出層

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/23195.html

相關(guān)文章

【永久開源】layuimini，最簡潔、清爽、易用的layui后臺框架模板。保證一用就會愛上它。

摘要：后臺模板項目介紹最簡潔清爽易用的后臺框架模板。項目會不定時進行更新，建議和一份，另外有問題請加群。地址定位，可以清楚看到當前的地址信息。刷新頁面會保留當前的窗口，并且會定位當前窗口對應(yīng)左側(cè)菜單欄。移動端的友好支持。 layuimini后臺模板項目介紹最簡潔、清爽、易用的layui后臺框架模板。項目會不定時進行更新，建議star和fork一份，另外有問題請加QQ群：76382252...

Karrdy 2019-08-02 15:21 評論0 收藏0
【永久開源】layuimini，最簡潔、清爽、易用的layui后臺框架模板。保證一用就會愛上它。

摘要：后臺模板項目介紹最簡潔清爽易用的后臺框架模板。項目會不定時進行更新，建議和一份，另外有問題請加群。地址定位，可以清楚看到當前的地址信息。刷新頁面會保留當前的窗口，并且會定位當前窗口對應(yīng)左側(cè)菜單欄。移動端的友好支持。 layuimini后臺模板項目介紹最簡潔、清爽、易用的layui后臺框架模板。項目會不定時進行更新，建議star和fork一份，另外有問題請加QQ群：76382252...

bingchen 2019-08-30 11:13 評論0 收藏0
fsLayui快速開始

摘要：是一個基于的快速開發(fā)插件，支持數(shù)據(jù)表格增刪改查操作，提供通用的組件，通過配置實現(xiàn)數(shù)據(jù)請求，減少前端重復(fù)開發(fā)的工作。注意這里一定要修改為自己項目的配置。列表頁列表頁支持通過表單傳參查詢數(shù)據(jù)，刷新表格等功能。 fsLayui 是一個基于layui的快速開發(fā)插件，支持數(shù)據(jù)表格增刪改查操作，提供通用的組件，通過配置html實現(xiàn)數(shù)據(jù)請求，減少前端js重復(fù)開發(fā)的工作。 GitHub下載碼云...

anquan 2019-08-02 15:59 評論0 收藏0
fsLayui快速開始

摘要：是一個基于的快速開發(fā)插件，支持數(shù)據(jù)表格增刪改查操作，提供通用的組件，通過配置實現(xiàn)數(shù)據(jù)請求，減少前端重復(fù)開發(fā)的工作。注意這里一定要修改為自己項目的配置。列表頁列表頁支持通過表單傳參查詢數(shù)據(jù)，刷新表格等功能。 fsLayui 是一個基于layui的快速開發(fā)插件，支持數(shù)據(jù)表格增刪改查操作，提供通用的組件，通過配置html實現(xiàn)數(shù)據(jù)請求，減少前端js重復(fù)開發(fā)的工作。 GitHub下載碼云...

lordharrd 2019-08-22 11:15 評論0 收藏0
layui實現(xiàn)動態(tài)和靜態(tài)數(shù)據(jù)表分頁

開發(fā)管理后臺是每一個開發(fā)人員都要熟悉的一個環(huán)節(jié)，作為后端程序員，公司的所有機密數(shù)據(jù)都掌握在我們手上，所以這個時候，如果不是公司的核心成員，是不能接觸到某些數(shù)據(jù)的，這個時候所有的工作都落到了我們的手上，從PS到Linux都需要我們親歷親為，還好發(fā)現(xiàn)了layui這個前端框架，很大程度上減輕了我們的壓力．今天我們先來學(xué)習(xí)一下layui實現(xiàn)動態(tài)數(shù)據(jù)表，靜態(tài)數(shù)據(jù)表，以及表格的分頁，其中還涉及到動態(tài)刷新數(shù)據(jù)...

caige 2019-08-22 16:47 評論0 收藏0