jQuery技术

JQuery 模态弹出窗口 简明现代魔法

字号+ 作者:H5之家 来源:H5之家 2017-02-25 16:01 我要评论( )

JQuery 模态弹出窗口 简明现代魔法

简明现代魔法 -> JQuery -> JQuery 模态弹出窗口

JQuery 模态弹出窗口

2010-01-09

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

效果演示




前台调用代码 <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> <input type="button" value="打开百度"><br> <input type="button" value="HTML字符串"><br> <input type="button" value="信息提示框"><br> <input type="button" value="是否确认框"> </p> </body> </html>

调用是比较简单的,脚本是popup.js和popupclass.js。popupclass是百度网的原始JS(其实也不算完全一样,因为我觉得它那个弹出窗口的那个关闭图标不好看,就换了个~~~~)popup.js是我根据它的JS文件提取的几个调用方法。现在我介绍下popup.js,关于popupclass.js可以参见桃花小舍的百度空间的一篇文章百度空间的popup效果分析。我基本上是按照他的思路来简单的封装了。

ShowIframe(title,contentUrl,width,height)

ShowHtmlString(title,strHtml,width,height)

ShowAlert(title,alertCon,width,height)

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

那么如何关闭弹出窗口呢,当然点击右上角的那个X就可以搞定了。如果用代码的话,只需要调用一个函数parent.ClosePop();就可以了。

如果在框架弹出窗口并显示在父页面上,只需在函数前面加一个parent来修饰。如:parent.ShowIframe(‘百度','http://www.baidu.com',500,200).

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JQuery index()方法使用代码

    JQuery index()方法使用代码

    2017-02-25 16:02

  • jquery.validate.js简介

    jquery.validate.js简介

    2017-02-25 13:04

  • 对照着jquery来学vue.js系列之配合thinkphp下拉获取分页数据

    对照着jquery来学vue.js系列之配合thinkphp下拉获取分页数据

    2017-02-25 13:00

  • jQuery入门(1)jQuery中万能的选择器

    jQuery入门(1)jQuery中万能的选择器

    2017-02-25 12:04

网友点评