easyDialog 简单、实用的弹出层组件

所属分类:UI-弹出层

 51151  378  查看评论 (12)
分享到微信朋友圈
X
easyDialog 简单、实用的弹出层组件 ie兼容6

easyDialog没有模板机制,只负责逻辑层的弹出效果,至于内容(消息框、表单、图片等)该如何呈现,easyDialog都不管,内容属于业务层的东西,业务需求是千变万化的,如果逻辑和业务结合很紧密,那么可移植性和可扩展性将大大降低。当然,如果你想找那种集成了模板的弹出层,请移步artDialog,artDialog的模板设计得很精美,功能也是很丰富的,但是体积比较大,压缩后的体积还是有18KB,如果是注重性能的网站,一个弹出层组件有这么大至少对于我来说是没法容忍的,在某些情况下优点恰恰也成了缺点,easyDialog始终保持着超轻量级。

easyDialog不依赖框架,使用起来很简单,只要引入easydialog.js文件就可以使用了:

// 引入easyDialog
<script src="easydialog.js" type="text/javascript"></script>

比如想弹出一个id为box的消息框,那么只需将id以字符串的形式传进去即可:

easyDialog.open({
    container : 'box'
});

关闭弹出窗口,只要调用关闭的方法即可:

easyDialog.close();

这是最简单的调用,container参数也是必须要有的,默认就是弹出的消息框下面有遮罩层,并且是相对于页面静止定位并垂直居中。如果想实现其他的效果且看下面的参数说明。

参数说明:

  • container string

  • 弹出层内容的id,该参数是必填项。

  • isOverlay boolean

  • 是否添加遮罩层,true为添加,false为不添加,默认是true。

  • fixed boolean

  • 是否相对于页面静止定位,true为静止,false为不静止,默认是ture。

  • follow string&object

  • 弹出层跟随自定义元素来定位,参数可以是id也可以是Dom对象。

  • followX number

  • 相对于跟随元素的X轴偏移,和follow参数同时使用。

  • followY number

  • 相对于跟随元素的Y轴偏移,和follow参数同时使用。

  • autoClose number

  • 自动关闭弹出层,单位为毫秒,默认为0,不自动关闭。

  • callback function

  • 关闭弹出层时执行的回调函数,默认为null。


相关插件-弹出层

jQuery多功能图片弹窗插件pirobox

点击图片列表中的图片会放大,并可以随意切换
  弹出层
 38156  380

特别实用、调用简单的弹出层

特别实用、调用简单的弹出层。完全可以用样式控制,可以兼容的不同选择相应的效果
  弹出层
 40210  338

表格鼠标移入同行同列变色(原创)

jQuery表格鼠标移入后同行同列变色
  弹出层
 27391  320

jQuery制作侧边悬浮折叠影藏弹窗特效

jQuery制作侧边悬浮折叠影藏弹窗特效
  弹出层
 41696  413

讨论这个项目(12)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    「南邮」? 0
    2019/1/15 11:30:45
    那么要弹出多种类容这个插件还实用吗?
    回复
    感应 0
    2018/4/22 16:47:15
    var $ = function(){
        return document.getElementById(arguments[0]);
    };

    跟同一页面的多个$(document).ready(function() {
    冲突了,应该怎么解决呢

    回复
    0
    2017/9/12 15:29:50

    能不能给我解释一下  我删掉随便一个为什么弹出窗口的叉就失效了

    回复
    0
    2017/9/12 15:12:30
    超级无敌简单实用
        0
        2017/9/12 15:13:09

        最重要的还是不要钱  不要钱  不要钱!!!!!!!!重要的事情说三遍

    回复
    冷风有信 0
    2016/12/8 16:12:27
    袁文 0
    2016/9/10 15:09:21
    这个JS在哪下载啊 回复
    つ Dust 0
    2016/8/24 17:08:27
    我不小心输了账号密码   会被盗吗 回复
    Hi JQ 0
    2016/7/22 15:07:06
    jiquan51 0
    2016/7/1 15:07:07
    还不错!
        冷风有信0
        2016/12/8 16:12:06
        你用过吗
    回复
    psp3006 0
    2016/6/18 18:06:55
    目前有一个小bug,如果在body创建之前初始化会导致报错 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复