使用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 相关文章推荐
怎么清空javascript数组
May 11 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
IE8中动态创建script标签onload无效的解决方法
Dec 22 Javascript
BootStrap制作导航条实例代码
May 06 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
js获取css的各种样式并且设置他们的方法
Aug 22 Javascript
微信小程序实现点击图片放大预览
Oct 21 Javascript
Vue项目接入Paypal实现示例详解
Jun 04 Javascript
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 REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
PHP函数超时处理方法
2016/02/14 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
深入解析神经网络从原理到实现
2019/07/26 Python
python生成器用法实例详解
2019/11/22 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
Python如何输出整数
2020/06/07 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
什么是.net
2015/08/03 面试题
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
李敖北大演讲稿
2014/05/24 职场文书
办公用品质量保证书
2015/05/11 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
tree shaking对打包体积优化及作用
2022/07/07 Java/Android