jQuery插件之Facebook风格模态框
2021年1月13日 | by tgcode
$.fn.jmodal是基于jQuery的插件,通过div和透明效果来模拟模态对话框,效果图如下:
源代码可到此下载:jquery.jmodal.js
下面介绍下此插件的使用方法:
- 引用jquery脚本(v1.3.*)
- 引用jquery.jmodal.js
- 触发对话框弹出的脚本为:
<!–
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/–>1
$.fn.jmodal(
{
2title:‘Information‘,
3content:‘Hi,youdisplayedme?‘,
4buttonText:‘Yes,It‘sme‘,
5okEvent:function(e){
6alert(‘jmodal‘llbeclosedafteruclickme:-)‘);
7}
8});
- content参数包含两种类型:String和Function,当为String类型的时候设置的文本信息将直接显示在弹出框中,当使用Function类型的时候,比如我们需要使用一个ajax的方法去获取特定的内容:
<!–
tgcode
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/–>1
$.fn.jmodal(
{
2title:‘Information‘,
3content:function(e)
{
4e.html(‘loading
‘);
5e.load(‘templates/templatehtml.htm‘,function(msg)
{
6//code
7});
8},
9buttonText:‘Yes,It‘sme‘,
10okEvent:function(e){
11alert(‘jmodal‘lltgcodebeclosedafteruclickme:-)‘);
12}
13});
那么此时可以传递一个function给content, jmodal会同样会传递一个参数给这个function,比如示例中的’e’,指的就是content的容器(jquery对象),那么使用’e.load()’方法就可以使用ajax加载需要的模板或者内容 ( 当然,同样也可以$.ajax ).
ps: 源码注释中有详细的API说明,livtgcodee demo
本文来自网络(http://f2e.me/200904/cross-scripting/,该网址已不能访问),仅作个人读书笔记之用,并稍作修改和补充。 什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的…