TGCode

关注互联网技术

jQuery插件之Facebook风格模态框

2021年1月13日   |   by tgcode

$.fn.jmodal是基于jQuery的插件，通过div和透明效果来模拟模态对话框，效果图如下：

%title插图%num

源代码可到此下载：jquery.jmodal.js

下面介绍下此插件的使用方法：

  1. 引用jquery脚本(v1.3.*)
  2. 引用jquery.jmodal.js
  3. 触发对话框弹出的脚本为：
    <!–

    Code highlighting produced by Actipro CodeHighlighter (freeware)
    http://www.CodeHighlighter.com/

    –>1%title插图%num%title插图%num$.fn.jmodal(%title插图%num{
    2%title插图%numtitle:‘Information‘,
    3%title插图%numcontent:‘Hi,youdisplayedme?‘,
    4%title插图%numbuttonText:‘Yes,It‘sme‘,
    5%title插图%numokEvent:function(e){
    6%title插图%numalert(‘jmodal‘llbeclosedafteruclickme:-)‘);
    7%title插图%num}
    8%title插图%num});

  4. content参数包含两种类型：String和Function，当为String类型的时候设置的文本信息将直接显示在弹出框中，当使用Function类型的时候，比如我们需要使用一个ajax的方法去获取特定的内容：
    <!–

    tgcode
    Code highlighting produced by Actipro CodeHighlighter (freeware)
    http://www.CodeHighlighter.com/

    –>1%title插图%num%title插图%num$.fn.jmodal(%title插图%num{
    2%title插图%numtitle:‘Information‘,
    3%title插图%num%title插图%numcontent:function(e)%title插图%num{
    4%title插图%nume.html(‘loading%title插图%num‘);
    5%title插图%num%title插图%nume.load(‘templates/templatehtml.htm‘,function(msg)%title插图%num{
    6%title插图%num//code
    7%title插图%num}    );
    8%title插图%num}    ,
    9%title插图%numbuttonText:‘Yes,It‘sme‘,
    10%title插图%numokEvent:function(e){
    11%title插图%numalert(‘jmodal‘lltgcodebeclosedafteruclickme:-)‘);
    12%title插图%num}
    13%title插图%num});

那么此时可以传递一个function给content, jmodal会同样会传递一个参数给这个function，比如示例中的’e’，指的就是content的容器(jquery对象)，那么使用’e.load()’方法就可以使用ajax加载需要的模板或者内容 ( 当然，同样也可以$.ajax ).

ps: 源码注释中有详细的API说明，livtgcodee demo

相关推荐: JavaScript跨域总结与解决办法

　　本文来自网络（http://f2e.me/200904/cross-scripting/，该网址已不能访问），仅作个人读书笔记之用，并稍作修改和补充。 　　什么是跨域 　　JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的…

Tags: ,