今天遇到一個問題:怎樣實現點擊一個按鈕,在當前的頁面上新增加一個小視窗,展示一個圖片信息? 如圖: 點擊之前: 單擊之後: 分析:要使新增的小視窗不影響父頁面,我們這裡採用iframe的框架的技術。 【<iframe>也應該是框架的一種形式,它與<frame>不同的是,iframe可以嵌在網頁中的任 ...
今天遇到一個問題:怎樣實現點擊一個按鈕,在當前的頁面上新增加一個小視窗,展示一個圖片信息?
如圖:
點擊之前:
單擊之後:
分析:要使新增的小視窗不影響父頁面,我們這裡採用iframe的框架的技術。
【<iframe>也應該是框架的一種形式,它與<frame>不同的是,iframe可以嵌在網頁中的任意部分。】
實現是思路:(1)在按鈕的上添加一個點擊的事件,在點擊後加入一個iframe視窗,並將生成圖片的地址
加上去即可。
具體實現的代碼:
(1)給按鈕加上點擊事件:
<input type="radio" name="dynamicType" id="dianji" style="padding: 0 10px 0 5px;margin-left:10px;margin-top: 13px;"/>
<p class="loadPhoto"></p>
$("#dianji").click(function(){
$("p.loadPhoto").empty(); // 清空原來的p標簽的中內容
$("p.loadPhoto").html("<iframe width=520 height=400 name=\"touzizuhe\" id=\"touzizuhe\" frameborder=0 src="生成圖片的地址"></iframe>");// 添加iframe的jquery的語句
});
註意:這裡iframe的開發之後,會自動的去訪問生成圖片的地址,這樣圖片的生成的需求就滿足了。