使用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 相关文章推荐
图片之间的切换
Jun 26 Javascript
一个基于jquery的文本框记数器
Sep 19 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 Javascript
ant design vue中表格指定格式渲染方式
Oct 28 Javascript
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
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编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
php中使用临时表查询数据的一个例子
2013/02/03 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
禁止js文件缓存的代码
2010/04/09 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
学习Node.js模块机制
2016/10/17 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
python 从远程服务器下载日志文件的程序
2013/02/10 Python
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
Python中给List添加元素的4种方法分享
2014/11/28 Python
pygame播放音乐的方法
2015/05/19 Python
Python复数属性和方法运算操作示例
2017/07/21 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
Python通过matplotlib画双层饼图及环形图简单示例
2017/12/15 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
大学毕业生个人自荐书
2014/07/02 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
英文辞职信范文
2015/05/13 职场文书
15个值得收藏的JavaScript函数
2021/09/15 Javascript
javascript函数式编程基础
2021/09/15 Javascript