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. Exception异常转String【转】

    把异常的栈轨迹以String形式返回 /** * 把异常的栈轨迹以String形式返回,而不是直接打印到console * @author King * @time 2015-04-29 * @ret ...

  2. POJ - 1905 Expanding Rods（二分+计算几何）

    http://poj.org/problem?id=1905 题意 一根两端固定在两面墙上的杆,受热后变弯曲.求前后两个状态的杆的中点位置的距离 分析 很明显需要推推公式. 由②的限制条件来二分角度, ...

  3. 微信现金红包 python

    微信现金红包发送接口,好像没法限制一个用户一个活动只能领取一次红包,在调用红包接口上,自己做了限制 REDPACK_RECORD 建表sql -- Create table create table ...

  4. 20155332 2016-2017-2 《Java程序设计》第7周学习总结

    20155332 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 了解Lambda语法 了解方法引用 了解Fucntional与Stream API 掌握Da ...

  5. Git查看单个文件修改历史

    1 命令 git log --pretty=oneline  文件名 ➜ admin git:(feature/v1.5.0_20181202_group) git log --pretty=onel ...

  6. 【文件】java生成PDF文件

    package test; import java.awt.Color; import java.io.FileOutputStream; import org.junit.Test; import ...

  7. 关于《汇编语言（王爽）》程序6.3使用16个dw 0的问题

    在学习王爽老师<汇编语言>的第6.2节时,在程序6.3代码中,给出了如下的代码: assume cs:code code segment dw 0123h, 0456h, 0789h, 0 ...

  8. python - classs内置方法 solt

    solt # __solt__ # 是一个类变量,变量值可以是列表.元组或者是可迭代对象,也可以是一个字符串 # (以为这所有实例只有一种数据属性) # # 作用:(为了节省内存空间,减少过多的实例属 ...

  9. Python 对图片进行人脸识别

    import cv2 def detect(path): img = cv2.imread(path) cascade = cv2.CascadeClassifier("/vagrant/d ...

  10. SHA1算法原理

    一．SHA1与MD5差异 SHA1对任意长度明文的预处理和MD5的过程是一样的,即预处理完后的明文长度是512位的整数倍,但是有一点不同,那就是SHA1的原始报文长度不能超过2的64次方,然后SHA1 ...

热门专题

多重检验校正 FDR BH简书
androidasync 怎么获取post 参数
模块化modularity
mongodb删除记录字段
微信 openid wyid
sqlserver 运维脚本
macos java设置
VM中不配置-Dnc.runMode=develop
c#通过接口读取simulink数据包含变量名吗
layer 中的dom
linux设置ipv4优先
Verilog的端口可以悬空吗
allure报告怎么改成中文
openwrt修改界面参数后台不生效
vmware安装centos镜像
怎么取消表格中的外部链接
同步请求可以用json
server2008 shutdown.exe 重启
vue点击事件获取当前遍历的对象的属性
后端怎么全局设定content-type为json