弹窗组件jqmodal的使用介绍

大家在开发中为了有比较好的交互体验，很多时时候要用到各种各样的前端弹窗效果，我在工作中主要经常用到的最简单的一个弹出提示框的组件是:

一、jquery.alert.js

jQuery Alert Dialogs Plugin

官网地址是:http://keleyi.com 由于现在官网似乎已经打不开了，但阻挡不了他的好用，如果有感兴趣的同学可以到  https://gitee.com/ydhcxh/jquery.alert.git 下载体验

二、layui的弹窗组件，这个也十分好用，自不用説，但相对于jquery.alert.js强大很多，代码量也比较重，这里就不用一一细説

三、jqmodal这个组件功能也十分强大，网上也有很多资料，大家可以找一找，也十分的多

由于这两天的项目里没有引入layui组件，也不想再为一个弹窗的效果引入整个layui,但jquery.alert.js又达不到我想要的效果， 在网找了很多个组件，最后找到了jqmodal用起来比较顺手，灵活方便，没有layui那么重，最佳选择，这里就介绍一下它的简单使用

3.1 引入jqmodal ,要先引入jquery再引入jqmodal

<script src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jqModal.js"></script>

3.2 引入jqmodal的样式：
 

<!--  jqModal Styling -->
<link type="text/css" rel="stylesheet" media="all" href="css/jqModal.css" />

3.3 示例代码：
 

    $().ready(function() {

      /* Example #1 */
      $('#dialog').jqm();

      /* Example #2 */
      $('#ajax-dialog').jqm({
        trigger: 'a.jqm-trigger-ajax',
        ajax: 'ajax.php',
        target: 'div.ajax-content',
        closeOnEsc: true
      });

      /* Example #3 */
      $('#trigger-ajax-with-timestamp').click(function() {
        var timestamp = new Date().getTime();
        $('#ajax-dialog').jqm({
          // update an option
          ajax: 'ajax.php?timestamp=' + timestamp
        }).jqmShow(); // show modal
        return false;
      });

      /* Example #4 */
      $('#modal-dialog').jqm({
        trigger: '#trigger-modal-dialog',
        modal: true
      });
      
      /* Example #5 */
      $('#ajax-text-dialog').jqm({
        trigger: '#trigger-ajax-text',
        ajax: 'ajax.php?sleep=true',
        ajaxText: 'Loading ...<span class="glyphicon glyphicon-refresh glyphicon-spin"></span>',
        target: 'div.ajax-content',
        closeOnEsc: true
      });
    });

3.4 官方示例见：http://jquery.iceburg.net/jqModal/#examples

3.5 效果截图:

 

如果有需要也可以直接在csdn上下载，下载地址：
jqModal弹窗插件-Javascript文档类资源-CSDN下载jqModal是我认为最强大方便的一个jquery弹窗插件更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/itopit/85129626

有喜欢的同学，请收藏本文章