JQuery 模態彈出窗口


由於之前的項目要用到這樣的窗口,所以就從百度中把它的這個窗口給借用了,當然,版權歸百度所有,我只是把它的代碼整合了下,也從它的代碼中學到了一些思想。

效果演示


Hello,PopWin',400,200)"/>
Hello,PopWin',200,100)"/>

 

前台調用代碼

  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
  4. <title>PopUp</title>  
  5. <script type="text/javascript" src="js/popup.js"></script>  
  6. <script type="text/javascript" src="js/popupclass.js"></script>  
  7. </head>  
  8. <body>  
  9. <p align="center">  
  10. <input  type="button" value="打開百度" onclick="ShowIframe('百度','http://www.baidu.com',800,450)"><br>  
  11. <input  type="button" value="HTML字符串" onclick="ShowHtmlString('字符串','<B>Hello,PopWin',400,200)"><br>  
  12. <input  type="button" value="信息提示框" onclick="ShowAlert('提示框','<B>Hello,PopWin',200,100)"><br>  
  13. <input  type="button" value="是否確認框" onclick="ShowConfirm('確定','是否刪除','Button4','',340,80)">  
  14. </p>  
  15. </body>  
  16. </html>    

調用是比較簡單的,腳本是popup.js和popupclass.js。popupclass是百度網的原始JS(其實也不算完全一樣,因為我覺得它那個彈出窗口的那個關閉圖標不好看,就換了個~~~~)popup.js是我根據它的JS文件提取的幾個調用方法。現在我介紹下popup.js,關於popupclass.js可以參見桃花小舍的百度空間的一篇文章百度空間的popup效果分析。我基本上是按照他的思路來簡單的封裝了。

ShowIframe(title,contentUrl,width,height)

  • title 彈出窗口的標題
  • contentUrl 彈出窗口的網頁路徑
  • width 彈出窗口的寬度
  • height 彈出窗口的高度

ShowHtmlString(title,strHtml,width,height)

  • title 彈出窗口的標題
  • strHtml HTML代碼
  • width 彈出窗口的寬度
  • height 彈出窗口的高度

ShowAlert(title,alertCon,width,height)

  • title 彈出對話框的標題
  • alertCon 彈出對話框的內容
  • width 彈出對話框的寬度
  • height 彈出對話框的高度

ShowConfirm(title,confirmCon,id,str,width,height)

  • title彈出確認框的標題
  • confirm彈出確認框的內容
  • id 點擊確定后要觸發事件的控件ID
  • str 傳值 (保留)
  • width 彈出確認框的寬度
  • height 彈出確認礦的高度

那么如何關閉彈出窗口呢,當然點擊右上角的那個X就可以搞定了。如果用代碼的話,只需要調用一個函數parent.ClosePop();就可以了。

如果在框架彈出窗口並顯示在父頁面上,只需在函數前面加一個parent來修飾。如:parent.ShowIframe(‘百度','http://www.baidu.com',500,200).


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM