php僞彈窗的實現

php個人博客

做開發的過程中,很多時候會要求我們有彈窗功能,就是一個操作,彈出一個窗口,選擇相應的內容後,返回原窗口,並且將值返回進行下面的操作。我也遇到了這樣的情況,所以我就像,要怎麼做呢?我查了很多資料,的確是有這樣的js功能,不過,挺複雜啊,而且不是很方便,也有較多的兼容問題。而直接用target=’_blank’又無法實現值的相互傳遞,所以我也比較糾結。不過,工作了這5個多月來,的確是讓自己的見識有了很大的增長。我明白了,程序的開發是個流程,這就是爲什麼作爲php程序員也要懂css,懂js。所以,很多時候很多功能都可以通過很多方式來實現。所以我想了想,能不能通過別的方式實現呢。

於是,我就想到了,要想實現數據的相互傳輸,最好是在一個頁面中是最好了,但是又要有彈窗效果,那我們其實可以利用css樣式的z-index屬性加定位。這樣可以讓標籤從文檔流中脫出。這樣不就實現了彈窗效果而且又是在一個頁面中了嗎。粗糙效果如下:

首先,定義一個div標籤。<div id=”show” style=”width:600px;position:absolute;left:20%;top:10%;z-index:1″></div>

這樣就有了一個容器,可是盛我們ajax返回的內容。我們用ajax返回中間的html代碼即可。而取消按鈕,其實就是一個button,觸發一個js函數將show裏面的東西清空。這樣就簡單的實現了一個彈窗。並且裏面的東西也是可以觸發外部的js的。就可以實現傳值了。

這樣就實現了一個僞彈窗的操作了,其實是挺簡單,也挺無聊的。不過,這也不失爲一個取巧的手段。再將樣式設計一下,就實現了一個很好的彈窗效果。當然可以讓這個窗口可以拖動等等。就更完美了。


發佈了29 篇原創文章 · 獲贊 11 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章