模态弹出窗口

由于之前的项目要用到这样的窗口，所以就从百度中把它的这个窗口给借用了，当然，版权归百度所有，我只是把它的代码整合了下，也从它的代码中学到了一些思想。

 

观看效果

    <html>  
   <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
   <title>PopUp</title>  
    <script type="text/javascript" src="https://files.cnblogs.com/ret00100/popup.js"></script>  
    <script type="text/javascript" src="https://files.cnblogs.com/ret00100/popupclass.js"></script>  
    </head>  
    <body>  
    <p align="center">  
   <input  type="button" value="打开百度" onclick="ShowIframe('百度','http://www.baidu.com',800,450)"><br>  
   <input  type="button" value="HTML字符串" onclick="ShowHtmlString('字符串','<B>Hello,PopWin',400,200)"><br>  
   <input  type="button" value="信息提示框" onclick="ShowAlert('提示框','<B>Hello,PopWin',200,100)"><br>  
   <input  type="button" value="是否确认框" onclick="ShowConfirm('确定','是否删除','Button4','',340,80)">  
   </p>  
   </body>  
 </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).


posted @ 2010-08-02 15:24  大佬辉  阅读(765)  评论(0)  编辑  收藏  举报