百度的模态弹出窗口
今天是全国高考的第一天,首先祝所有的考生都能取得好成绩,时间过的挺块的,5年前的自己也是经历了这黑色的六月.
回到正题,今天晒给大家的是百度的模态弹出窗口.由于之前的项目要用到这样的窗口,所以就从百度中把它的这个窗口给借用了,当然,版权归百度所有,我只是把它的代码整合了下,也从它的代码中学到了一些思想.
先贴下效果图:
弹出网页(相当于window.showdialog('...');
弹出字符串(感觉这样称呼怪怪的~~)
信息提示框(相当于window.alert('hello,PopWin');)
是否确认框(相当于window.confirm('是否删除');)
代码如下:
















调用是比较简单的,脚本是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).
好了,先写这么多吧,有什么问题可以和我交流。
附示例下载
/Files/coding1016/BaiduPop.rar

【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 单线程的Redis速度为什么快?
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 展开说说关于C#中ORM框架的用法!
· SQL Server 2025 AI相关能力初探
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库