使用jquery制作弹出框效果


Posted in Javascript onApril 03, 2015

非常不错的国产JS弹出框插件,由前端工程师alien开发,提供多种类型的自定义对话框,使用方法简单,浏览器兼容性好,支持的弹出框模式有:

alert:普通提示(警告)对话框
confirm:询问(确认)对话框
message:简单消息对话框(无title、无按钮)
iframe:在对话框中嵌入一个iframe
tip:带有小三角指向的小tip
dialog:最基础的自定义对话框

var jDialogId = [];
(function ($) {
  $.jDialog = function (options) {
 
    var id = parseInt(Math.floor(Math.random() * 1000 + 1));
    while ($.inArray(id, jDialogId) != -1) {
      id = parseInt(Math.floor(Math.random() * 1000 + 1));
    }
    jDialogId.push(id);
 
    var defaults = {
      title:"",
      content: "这是一个JasUI-Dialog插件",
      width: 350,
      height: 0,
      timer: 0,
      showbuttons:false,
      buttons: [],
      okval: "确认",
      ok: function () { return false;},
      cancelval: "取消",
      cancel: function () { return false; },
      showclose:true,
      close: function () { },
      theme:""
    };
    var options = $.extend(defaults, options);
    var _objdiv = "<div id='j-dialog-" + id + "' class='j-dialog ";
    if (options.theme != "") {
      _objdiv = _objdiv + "j-dialog-" + options.theme + "'>";
    } else {
      _objdiv = _objdiv + "'>";
    }
    _objdiv = _objdiv + "<div class='j-dialog-header'>";
    if (options.showclose) {
      _objdiv = _objdiv + "<a href='javascript:void(0)' class='j-close j-dialog-close'></a>"
    } 
    if (options.title != "") {
      _objdiv = _objdiv + "<h5 class='j-dialog-title'>" + options.title + "</h5>";
    }
    _objdiv = _objdiv + "</div>";
    _objdiv = _objdiv + "<p class='j-dialog-content'>" + options.content + "</p>";
     
    if (options.showbuttons) {
      _objdiv = _objdiv + "<div class='j-dialog-footer'>";
      $.each(options.buttons,function(i,value) { 
        _objdiv = _objdiv + "<a class='j-button' data-id='" + i + "'>" + value.title + "</a>";
      })
      _objdiv = _objdiv + "<a class='j-button j-button-primary j-dialog-ok'>" + options.okval + "</a>";
      _objdiv = _objdiv + "<a class='j-button j-dialog-cancel'>" + options.cancelval + "</a>";
      _objdiv = _objdiv + "</div>";
    };
     
    _objdiv=_objdiv+"</div>";
    $("body").append(_objdiv);
    var _obj = $('#j-dialog-' + id)
    if (options.height>0) {
      _obj.css("height", options.height);
    }
    _obj.css("width", options.width);
    _obj.css("margin-top", '-' + (options.height / 2) + 'px');
    _obj.css("margin-left", '-' + (options.width / 2) + 'px');
    _obj.animate({ top: '30%',opacity:1 }, 0);
    if (options.showclose) {
      _obj.find('.j-dialog-close').on('click', function () {
        $.jDialogRemove(id, options.close);
      })
      _obj.find('.j-dialog-ok').on('click', function () {
        if (!options.ok()) {
          $.jDialogRemove(id, options.close);
        }
      })
      _obj.find('.j-dialog-cancel').on('click', function () {
        if (!options.cancel()) {
          $.jDialogRemove(id, options.close);
        }
      })
    }
    if (options.showbuttons) {
      $.each(options.buttons, function (i, value) {
        _obj.find("[data-id=" + i + "]").on('click', function () {
          if (!value.callback()) {
            $.jDialogRemove(id, options.close);
          }
        })
      })
    };
    if (options.timer> 0) {
      setTimeout(function () {
        $.jDialogRemove(id,options.close);
      }, options.timer);
    }
    return id;
  },
  $.jDialogRemove = function (id, callback) {
    if ($.inArray(id, jDialogId)!=-1) {
      jDialogId.splice($.inArray(id, jDialogId), 1);
      $('#j-dialog-' + id).animate({ top: '0', opacity: 0 }, 500, function () {
        $('#j-dialog-' + id).remove();
        if (callback) {
          callback();
        }
      });
    }
  },
  $.jTip = function (options) {
    var defaults = {
      content: "这是一个JasUI-Dialog插件",
      width: 200,
      timer: 0,
      showclose: false,
      close: function () { },
      theme: ""
    };
    var options = $.extend(defaults, options);
    $.jDialog(options);
  },
  $.jFloatText = function (txt,color,posX,posY) {
    var $i = $("<b>").text(txt);
    var x = '50%', y = '40%';
    var _color = '#E94F06';
    if (color) {
      _color= color;
    }
    if (posX) {
      x = posX;
    }
    if (posY) {
      y = posY;
    }
    $i.css({ top: 200, left: x, position: "absolute", color: "#E94F06" });
    $("body").append($i);
    $i.animate({ top: 20, opacity: 0}, 1500, function () {
      $i.remove();
    });
  }
 
})(jQuery);

以上所述就是本文的全部内容了,希望能够对大家熟练使用jQuery有所帮助。

Javascript 相关文章推荐
jquery cookie插件代码类
May 26 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 Javascript
javascript检测是否联网的实现代码
Sep 28 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 Javascript
JavaScript实现网页加载进度条代码超简单
Sep 21 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
vue项目中使用scss的方法步骤
May 16 Javascript
vue实现百度语音合成的实例讲解
Oct 14 Javascript
Vue如何实现变量表达式选择器
Feb 18 Vue.js
javascript 实现map集合
Apr 03 #Javascript
jQuery制作简洁的图片轮播效果
Apr 03 #Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 #Javascript
jQuery实现左右切换焦点图
Apr 03 #Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 #Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 #Javascript
JavaScript替换当前页面的方法
Apr 03 #Javascript
You might like
PHP 程序员的调试技术小结
2009/11/15 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
2011/10/22 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
2014/08/07 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
JS打印组合功能
2016/08/04 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
vue的路由映射问题及解决方案
2019/10/14 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
Merrell迈乐澳大利亚网站:购买户外登山鞋
2017/05/28 全球购物
三个儿子教学反思
2014/02/03 职场文书
《巨人的花园》教学反思
2014/02/12 职场文书
企业金融服务方案
2014/06/03 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
导游词之麻姑仙境
2019/11/18 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server