`

jquery.sobox 经典版弹窗控件

阅读更多

sobox 是一款非常实用的,基于 jQuery 的弹窗控件。
功能非常完整,而代码量又非常少(压缩完仅8k不到)的一款弹窗控件,
如果你熟悉ext的弹窗控件,那么sobox的使用对你来说应该是愉悦而完全没有压力。

效果预览

引入sobox文件

  1. <link type="text/css" rel="stylesheet" media="all" href="style.css" />
  2. <script type="text/javascript" src="jquery1.9.1.min.js"></script>
  3. <script type="text/javascript" src="jquery.sobox.js"></script>
复制

使用方法

  1. $('.a-tip').click(function () {
  2.     $.sobox.tip({
  3.         content: '爱看不看,上面提示一下~'
  4.     });
  5.     return false;
  6. });
复制

sobox 基本参数

  1. //通用方法
  2. $.sobox.pop({
  3.      /* 弹出类型及类型参数 */
  4.     type : 'content', // 弹窗内容模式:'content','target','ajax','iframe',每个模式分别对应每个参量
  5.     target : null, // target方式,target目标,如 '.detail','#contbox'
  6.     content : null, // content方式,支持html
  7.     iframe : null, // iframe方式,值为iframe目标页链接,如:http:// www.baidu.com/
  8.     ajax:{url:null,data:null,callback:function(){}}, // ajax事件
  9.  
  10.      /* 位置信息 */
  11.     posType:'center', // 'center,win,doc,tc,bc' 位置类型,居中 / 距window顶部 / 距离doucment顶部定 / top水平居中 / bottom水平居中,默认居中
  12.     pos:[0,0], // [x,y] 距离document左上角坐标,set模式使用
  13.     offset:[0,0], // [x,y] 弹窗相对本来设定位置偏移量,center模式只改变y轴
  14.  
  15.      /* 自定义参数 */
  16.     cls : null, // 添加自定义类名
  17.     width:360,height:null, // 宽高属性,iframe模式下,height为iframe高度
  18.     defaultShow:true, // 直接显示pop
  19.     visibility:true, // 默认pop执行后显示(用于部分复杂处理场景)
  20.     title : '提示', // 默认标题
  21.     showTitle:true, // 标题栏隐藏:默认显示
  22.     showMask : true, // 显示遮罩
  23.     drag :true, // 是否可拖动
  24.     maskClick : true, // 点击背景关闭内容
  25.     btn : [], // {cls:,text'确定',link:,removePop: true,callback:}
  26.  
  27.      /* 返回事件 */
  28.     beforePop:function(){}, // 弹窗打开之前callback事件
  29.     onPop: function(){}, // 页面打开callback事件
  30.     closePop: function(){} // 点击标题关闭按钮返回事件
  31. });
  32.  
  33. btn参数说明:
  34.  
  35. 默认每个btn元素由一个.a-sopop-btn a元素内置一个.s-sopop-btn span元素组成,
  36.  
  37. {
  38.      cls:null, // 添加类名
  39.      text:'确定', // 默认按钮文字
  40.      link:'#', // 为a添加链接,添加链接后,按钮返回链接指向地址
  41.      removePop: true, // 默认点击按钮关闭弹出层
  42.      callback:function (removePop){} // 返回事件
  43. }
复制

 

 

1
1
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    简单的jquery.cookie插件使弹窗点击关闭后一天弹一次.zip

    在这个场景下,`jquery.cookie` 插件的应用可以帮助我们实现一个更智能的弹窗策略:用户关闭弹窗后,一天内不再显示。接下来,我们将详细讲解如何使用 `jquery.cookie` 插件以及实现这个功能的具体步骤。 首先,`...

    简单的jquery.cookie插件使弹窗点击关闭后一天弹一次

    以上就是使用jQuery和jquery.cookie插件实现弹窗一天只显示一次的详细步骤。这种技术可以应用于各种需要周期性提醒或者用户行为跟踪的场景,如广告展示、用户同意条款等。通过这种方式,我们可以更好地控制用户体验...

    基于Jquery的模态弹窗控件

    基于Jquery的模态弹窗控件基于Jquery的模态弹窗控件基于Jquery的模态弹窗控件基于Jquery的模态弹窗控件基于Jquery的模态弹窗控件基于Jquery的模态弹窗控件基于Jquery的模态弹窗控件基于Jquery的模态弹窗控件

    jquery封装的漂亮弹窗confirm

    "jquery封装的漂亮弹窗confirm"是一个利用jQuery实现的对话框插件,它为开发者提供了一个美观且功能丰富的确认对话框替代原生JavaScript的`confirm()`函数。这个组件的主要目标是增强用户体验,同时保持代码的简洁和...

    基于jQuery的图片点击弹窗预览大图插件,jquery.fancybox-1.3.4

    &lt;link rel="stylesheet" href="jquery.fancybox-1.3.4.css"&gt; &lt;script src="https://code.jquery.com/jquery-1.7.1.min.js"&gt;&lt;/script&gt; &lt;script src="jquery.fancybox-1.3.4.pack.js"&gt; ...

    jquery.media.js.zip

    《jQuery.media.js:深入解析与应用》 在Web开发领域,jQuery库以其简洁的API和强大的功能,成为了JavaScript开发者们的首选工具。今天我们要探讨的是一个基于jQuery的插件——jQuery.media.js,它为网页中的多媒体...

    jquery.inputer 完美替换select控件 带模糊搜索

    1.jquery.inputer为替代select控件开发! 2.本控件经过测试,兼容IE,火狐! 3.本控件可以自由扩展! 4.本控件为原创,代码有些凌乱,但功能齐全! ---本控件代码为本人编写,完全处于分享拿出来的,有什么地方写的...

    jQuery.floatDiv 浮动弹窗层居中

    middletop(居中置顶)、middlebottom(居中置低)、leftmiddle、rightmiddle

    jquery.layerModel 弹窗插件

    《jQuery LayerModel 弹窗插件深度解析》 在网页设计和开发中,弹窗功能是一种常见的用户交互手段,用于提示、确认、展示信息等。jQuery LayerModel 是一款基于 jQuery 的弹窗插件,它提供了丰富的自定义选项和灵活...

    jquery.treeview.js树控件

    《jQuery Treeview.js 树形控件深度解析与应用》 在Web开发中,树形控件是一种常见的数据展示方式,它能够清晰地组织和层级化数据,方便用户浏览和操作。jQuery Treeview.js插件作为一款强大的JavaScript库,为...

    使用jQuery插件FancyBox轻松实现弹窗视频

    &lt;link rel="stylesheet" href="path/to/jquery.fancybox.min.css" /&gt; &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; &lt;script src="path/to/jquery.fancybox.min.js"&gt; ``` 接下来,我们需要...

    jquery.uploadify-v2.1.4[修正版]

    《jQuery.uploadify v2.1.4:中文友好修正版》 在Web开发中,上传功能是不可或缺的一部分,而jQuery.uploadify插件以其强大的功能和易用性深受开发者喜爱。这个"jquery.uploadify-v2.1.4[修正版]"正是基于官方的v...

    jQuery基于layui.js外部调用弹窗代码.zip

    《jQuery与layui.js结合实现外部调用弹窗的实践与详解》 在Web开发中,交互性和用户体验是至关重要的因素,而弹窗功能是提升用户体验的常见手段之一。本篇文章将详细探讨如何利用jQuery和layui.js框架实现外部调用...

    jquery.marquee.js官方下载

    《jQuery.marquee.js插件深度解析与应用指南》 在Web开发中,滚动效果常常用于吸引用户的注意力,jQuery.marquee.js就是一款专为实现这种滚动效果而设计的JavaScript插件。该插件基于广泛使用的jQuery库,使得创建...

    jquery.alerts.js(jQuery Alert, Confirm, Prompt)

    对于confirm()函数,`jquery.alerts.js`同样提供了增强版。开发者可以定制确认框的布局,包括确认和取消按钮的文本、颜色、大小等。更重要的是,当用户点击确认或取消时,可以触发不同的回调函数,方便进行下一步...

    一天弹一次jquery.cookie插件.zip

    标题"一天弹一次jquery.cookie插件.zip"指的是一个专门设计的jQuery插件,这个插件的核心功能是控制弹窗(通常是指网页中的提示、广告或通知)只在用户首次访问或者关闭后的一天内显示一次。这种功能在网页用户体验...

    jquery.pagination.js 下载

    jquery.pagination.js 下载,优秀的jquery分页插件,使用IP代理国外网站下载而来

    jquery.form.js下载

    jquery.form.js jquery.form.js

    jquery.min.map

    jquery.min.map is a good

    Jquery.json.js

    在早期版本的jQuery中,`jQuery.parseJSON()`函数用于将JSON字符串解析为JavaScript对象。然而,随着JSON支持成为JavaScript语言标准的一部分,现代浏览器都内置了`JSON.parse()`方法,这通常被认为更安全且推荐使用...

Global site tag (gtag.js) - Google Analytics