JqModal 是jQuery的一个插件，用来在web浏览器中显示自定义通告，而且它为通用窗口框架奠定了基础。

1. 多模型支持
2. 支持拖拽和重定义大小
3， 支持远程加载窗口内容（ajax和iframes）
下载：
 
使用的方法：
step1:添加js与css
<link href="css/jqModal.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="scripts/jqModal.js" type="text/javascript"></script>
<script src="scripts/jqDnR.js" type="text/javascript"></script>

 
Step2:前台HTML
<a href="#" class="jqModal">view</a>
...
<div class="jqmWindow" id="dialog">
<a href="#" class="jqmClose">Close</a>
<hr>
<em>READ ME</em> -->
This is a "vanilla plain" jqModal window. Behavior and appeareance extend far beyond this.
The demonstrations on this page will show off a few possibilites. I recommend walking
through each one to get an understanding of jqModal <em>before</em> using it.
     </div>

前台JS
<script type="text/javascript">
    $().ready(function() {
        $('#dialog').jqm();
    });
</script>

效果：
 
 
前台HTML:
<a href="#" class="ex3bTrigger">view</a> (alert)
...
<div class="jqmAlert" id="ex3b">

<div id="ex3b" class="jqmAlertWindow">
    <div class="jqmAlertTitle clearfix">
    <h1>Did you know?</h1><a href="#" class="jqmClose"><em>Close</em></a>
  </div>
 
  <div class="jqmAlertContent">
  <p>Please wait... <img src="inc/busy.gif" alt="loading" /></p>
  </div>
</div>

</div>

 
前台JS
 $().ready(function() {
var triggers = $('a.ex3bTrigger')[0];
      $('#ex3b').jqm({
            trigger: triggers,
            ajax: 'html/2.htm',
            target: 'div.jqmAlertContent',
            overlay: 0
        });
        // Close Button Highlighting. IE doesn't support :hover. Surprise?
        if ($.browser.msie) {
            $('div.jqmAlert .jqmClose')
  .hover(
    function() { $(this).addClass('jqmCloseHover'); },
    function() { $(this).removeClass('jqmCloseHover'); });
        }
    });

效果：
 
 
前台HTML
<body>
<a href="#" id="ex3aTrigger">view</a> (dialog)
...
<div id="ex3a" class="jqmDialog">
<div class="jqmdTL"><div class="jqmdTR"><div class="jqmdTC jqDrag">Dialog Title</div></div></div>
<div class="jqmdBL"><div class="jqmdBR"><div class="jqmdBC">
<div class="jqmdMSG">
Styled windows or dialogs are easy!
<br /><br />
This particular theme was done for <a href="http://www.pommo.org">poMMo</a> --
</div>
</div></div></div>
<input type="image" src="dialog/close.gif" class="jqmdX jqmClose" />
</div>
</body>
 
前台JS
<script type="text/javascript">
    $(document).ready(function() {
        $('#ex3a').jqm({
            trigger: '#ex3aTrigger',
            overlay: 30, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */
            overlayClass: 'whiteOverlay'
        })
    .jqDrag('.jqDrag'); /* make dialog draggable, assign handle to title */
$('input.jqmdX')
  .hover(
    function() { $(this).addClass('jqmdXFocus'); },
    function() { $(this).removeClass('jqmdXFocus'); })
  .focus(
    function() { this.hideFocus = true; $(this).addClass('jqmdXFocus'); })
  .blur(
    function() { $(this).removeClass('jqmdXFocus'); });
    });
</script>
 
效果：
 
 
前台HTML
<body>
<a href="#" id="ex3cTrigger">view</a> (notice)
...
<div style="position: absolute; margin: 10px 0 0 100px;">
<div id="ex3c" class="jqmNotice">
    <div class="jqmnTitle jqDrag">
      <h1>Did you know?</h1>
    </div>
  <div class="jqmnContent">
  <p>Pine, spruce, or other evergreen wood should never be used in barbecues. These woods,    </p>
  </div>
  <img src="css/notice/close_icon.png" alt="close" class="jqmClose" />
  <img src="css/notice/resize.gif" alt="resize" class="jqResize" />
</div>
</div>
</body>

 
前台JS
 $().ready(function() {
        $('#ex3c')
    .jqDrag('.jqDrag')
    .jqResize('.jqResize')
    .jqm({
        trigger: '#ex3cTrigger',
        overlay: 0,
        onShow: function(h) {
            /* callback executed when a trigger click. Show notice */
            h.w.css('opacity', 0.92).slideDown();
        },
        onHide: function(h) {
            /* callback executed on window hide. Hide notice, overlay. */
            h.w.slideUp("slow", function() { if (h.o) h.o.remove(); });
        }
    });
    });
 
效果：
 
前台HTML
<body>
<a href="#" class="ex2trigger">View</a>
...
<div class="jqmWindow" id="ex2">

Please wait... <img src="inc/busy.gif" alt="loading" />
</div>
</body>

 
前台JS
<script type="text/javascript">
    $(document).ready(function() {
        $('#ex2').jqm({ ajax: 'html/1.htm', trigger: 'a.ex2trigger' });
    });
</script>

效果：
 
前台HTML
<body>
<a href="#" class="alert">view</a> (alert)
<a href="#" class="confirm">view</a> (confirm)
...
<!-- Alert Dialog -->
<div class="jqmAlert" id="alert">
<div id="ex3b" class="jqmAlertWindow">
    <div class="jqmAlertTitle clearfix">
    <h1>Warning!</h1><a href="#" class="jqmClose"><em>Close</em></a>
  </div>
  <div class="jqmAlertContent"></div>
</div>
</div>
 
<!-- Confirm Dialog -->
<div class="jqmConfirm" id="confirm">
<div id="ex3b" class="jqmConfirmWindow">
    <div class="jqmConfirmTitle clearfix">
    <h1>Confirmation por favor...</h1><a href="#" class="jqmClose"><em>Close</em></a>
  </div>
  <div class="jqmConfirmContent">
  <p class="jqmConfirmMsg"></p>
  <p>Continue?</p>
  </div>
  <input type="submit" value="no" />
  <input type="submit" value="yes" />
  </p>
</div>
</div>
</body>

 
<script type="text/javascript">
    /* Overriding Javascript's Alert Dialog */
    function alert(msg) {
        $('#alert')
    .jqmShow()
    .find('div.jqmAlertContent')
      .html(msg);
    }
    $().ready(function() {
        $('#alert').jqm({ overlay: 0, modal: true, trigger: false });
        // trigger an alert whenever links of class alert are pressed.
        $('a.alert').click(function() {
            alert('You Have triggered an alert!');
            return false;
        });
    });

function confirm(msg, callback) {
        $('#confirm')
    .jqmShow()
    .find('p.jqmConfirmMsg')
      .html(msg)
    .end()
    .find(':submit:visible')
      .click(function() {
          if (this.value == 'yes')
              (typeof callback == 'string') ?
            window.location.href = callback :
            callback();
          $('#confirm').jqmHide();
      });
    }
    $().ready(function() {
        $('#confirm').jqm({ overlay: 88, modal: true, trigger: false });
        // trigger a confirm whenever links of class alert are pressed.
        $('a.confirm').click(function() {
            confirm('About to visit: ' + this.href + ' !', this.href);
            return false;
        });
    });
</script>

 
效果：

JQuery插件jqModal应用详解（十二）的更多相关文章

  1. jQuery插件制作方法详解

        jQuery插件制作方法详解   jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加 上Jtip,并引入jtip.js及其样式即可以了. ...

  2. jQuery插件编写步骤详解

    如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...

  3. jQuery插件- Autocomplete应用详解

    项目中有时会用到自动补全查询,就像Google搜索框.淘宝商品搜索功能,输入汉字或字母,则以该汉字或字母开头的相关条目会显示出来供用户选择, autocomplete插件就是完成这样的功能. auto ...

  4. jQuery插件autoComplete使用详解

    安装/需要引入的文件 <script type="text/javascript" src="../js/jquery-1.8.3.min.js.js"& ...

  5. jQuery的deferred对象详解（二）

    Deferred对象是由$.Deferred构造的,$.Deferred被实现为简单的工厂模式. $.Deferred的实现 创建三个$.Callbacks对象,分别表示成功done,失败fail,处 ...

  6. Nginx详解十二：Nginx场景实践篇之跨站访问相关

    跨站访问 浏览器请求一个页面的时候,发送了两个域名的请求 此情况不安全,容易出现CSRF攻击,所以浏览器禁止跨域访问 Nginx设置打开跨站访问 配置语法:add_header name value ...

  7. Linux 网络编程详解十二

    UDP的特点 --无连接 --基于消息的数据传输服务 --不可靠 --UDP更加高效 UDP注意点 --UDP报文可能会丢失,重复 --UDP报文可能会乱序 --UDP缺乏流量控制(UDP缓冲区写满之 ...

  8. 【转】JQuery上传插件Uploadify使用详解及错误处理

    转自:http://www.jb51.net/article/43498.htm 关于JQuery上传插件Uploadify使用详解网上一大把,基本上内容都一样.我根据网上的步骤配置完成后,会报一些错 ...

  9. CMake 手册详解（二十）

    SirDigit CMake 手册详解(二十) CMD#51: list 列表操作命令. list(LENGTH <list> <output variable>) list( ...

随机推荐

  1. Gitlab配置阿里邮件通知

    1. 在/etc/gitlab/gitlab.rb 中添加如下内容 $ vi /etc/gitlab/gitlab.rb gitlab_rails['smtp_enable'] = true  git ...

  2. Grooming Meeting及测试人员所扮演的角色

    Grooming Meeting的中文翻译是“梳理会议”,它并不是Scrum框架中标准的会议(标准会议为Planning Meeting, Daily Scrum Meeting, Review Me ...

  3. 16. Spring boot 错误页面

      默认效果:1).浏览器,返回一个默认的错误页面 1.1 请求头 1.2返回结果 2).如果是其他客户端,默认响应一个json数据 2.1请求头 2.2返回结果 { "timestamp& ...

  4. 把ui界面加入到工程中

    第一步   from untitled import Ui_Form untitled是ui转化成py的文件名:Ui_Form是转换后的类名 第二步  把Ui_Form做为工程的父类    class ...

  5. MySQL 之 数据库自动生成ID格式化编号(字符串格式化填充/拼接/时间)

    # 用户账号:1-4位:入职年份:5-6位:入职月份:7-11位:员工入职顺序号 select concat( date_format(now(),'%Y'), date_format(now(),' ...

  6. undefined reference问题总结

    http://ticktick.blog.51cto.com/823160/431329 http://blog.sina.com.cn/s/blog_605f5b4f01018xeu.html ht ...

  7. 个人经验~mysql故障处理思路

    一 简介:个人经验总结 二 思路: 从整体上再进行梳理 三 linux角度 1 硬件是否有问题  常见主板 raid卡 和raid磁盘组 2 综合指标 负载 uptime : 1min  5min  ...

  8. python cookbook 笔记一

    因为有些代码只有在python3里可以正常运行,所以最好配两个虚拟环境 安装虚拟环境: pip install virtualenv virtualenv -p /usr/bin/python3.5 ...

  9. 【转】Shell编程进阶篇(完结)

    [转]Shell编程进阶篇(完结) 1.1 for循环语句 在计算机科学中,for循环(英语:for loop)是一种编程语言的迭代陈述,能够让程式码反复的执行. 它跟其他的循环,如while循环,最 ...

  10. ARMV8 datasheet学习笔记3：AArch64应用级体系结构之Synchronization and semapores

    1.前言 本文主要介绍原子变量的实现原理,对原子变量的修改有一套特殊的机制 2. Local monitor和Global monitor UP时执行Load EX和Store EX时仅需关注Loca ...

热门专题

nsstatusitem 可变
mysql 省市三级联动三表合一
加载谷歌访问助手错误
c语言解Arithmetic of Bomb
linux 安装命令 unrar
photoshop脚本指南
vs2013工具箱 devexpress安装
razor 获取网站根路径
《网络是怎样连接的》 pdf
汉字转拼音不带音标 python
QGraphicsProxyWidget 位置
cypher模糊匹配一个属性可以是a也可以是b
vue 路由跳转打开外部链接
Python 写xml文件时和原xml文件顺序不一致
vue中createApp的方法不自动补全
win10系统添加中文(简体,中国)美式键盘
shell 获取当前路径变量
vmware esxi 失败无法锁定文件
修改 etc profile重启指令
联想电脑F2不能重命名