JQuery 模态弹出窗口

最新推荐文章于 2023-08-25 22:18:02 发布

weixin_30436101

最新推荐文章于 2023-08-25 22:18:02 发布

阅读量63

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ethan-qi/archive/2012/07/25/2607913.html

版权

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

效果演示

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

前台调用代码

view plain copy to clipboard print ?

<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).

转载于:https://www.cnblogs.com/ethan-qi/archive/2012/07/25/2607913.html

weixin_30436101

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 模态弹出窗口

由于之前的项目要用到这样的窗口，所以就从百度中把它的这个窗口给借用了，当然，版权归百度所有，我只是把它的代码整合了下，也从它的代码中学到了一些思想。效果演示Hello,PopWin',400,200)"/>Hello,PopWin',200,100)"/>前台调用代码view plaincopy to clipboardprint?...
复制链接

扫一扫