JQuery 模态弹出窗口

来源：互联网发布：哈利波特宝箱淘宝编辑：程序博客网时间：2024/06/05 07:16

无效果演示

前台调用代码

view plaincopy to clipboardprint?
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
<title>PopUp</title>  
<script type="text/javascript" src="js/popup.js"></script>  
<script type="text/javascript" src="js/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).

原文地址：http://www.nowamagic.net/jquery/jquery_PopWindow.php