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. rpm打包tomcat

    1.制作rpm包 yum install rpm-build -y 2.创建工作目录 mkdir -pv ~/rpmbuild/{BUILD,RPMS,SOURCES,SPECS,SRPMS} 3.准 ...

  2. 01、@ConfigurationProperties 将属性文件里的值映射到JavaBean

    @ConfigurationProperties("person") //或是prefix属性 @Component //必须注册成容器中的bean被容器管理起来 public c ...

  3. Bulma - 基于 Flexbox 的现代化的 CSS 框架

    Bulma 是一个基于 Flexbox 的现代化的 CSS 框架,设计的初衷就是移动优先(Mobile First),模块化设计,可以轻松用来实现各种简单或者复制的内容布局,浏览器支持:浏览器支持:C ...

  4. buildroot构建项目（六）--- u-boot 2017.11 适配开发板修改 4 ---- 系统启动初始化之三

    一.内存控制器 在关闭了MMU和caches 之后 就进入lowlevel_init 函数,对内存控制器进行初始化.lowlevel_init.S (board\samsung\mini2440) 1 ...

  5. 下拉选择框QCombox

    下拉列表框样式如图: 字体列表框样式: import sys from PyQt5.QtWidgets import QApplication, QWidget, QComboBox, QFontCo ...

  6. 数据库之MySQL存储过程

    一.参考文献 https://www.oschina.net/translate/create-and-call-mysql-stored-procedure-database-sql-example ...

  7. [转]NOI_Linux Arbiter使用手册

    讲述清楚,简单易懂的Arbiter使用手册 转载自 https://www.cnblogs.com/gengchen/p/7761565.html Arbiter 系统使用说明 Overview Ar ...

  8. 【BUG】xml读取异常Invalid byte 1 of 1-byte UTF-8 sequence

    来自http://blog.csdn.net/chenyanbo/article/details/6866941 xml读取异常Invalid byte 1 of 1-byte UTF-8 seque ...

  9. sizeof strlen区别于联系

    http://www.cnblogs.com/carekee/articles/1630789.html

  10. PMM安装-第一篇

    一 简介 今天来聊聊 PMM安装使用 二 安装 1 server端执行   curl -sSL https://get.daocloud.io/docker | sh    docker pull p ...

热门专题

vs2019 创建mvc 主子表
myeclipse没有deployment assembly
bios intel manage engine 叹号
SQL server updata的写法
python中的and怎么用
linux 远程执行命令 需要 exit
ubuntu .ovpn 怎么登录
layer.open 弹出不居中
mainactivity 不调用ondestroy
arcgis滚轮缩放调整反向
saltstack cmd.run 参数
ebs ar 冲销记录表
wpf StackPanel自定义属性
catalina.out根据时间截取一部分
window c 环境设置
windows如何隐藏进程
语义化的Html模板
github.exe怎么用
Morris Xkey日期变成时间了
jobject无法创建抽象类