jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)_jquery

对于 Boxy弹出框的使用之前写过一些文章(查看jquery.boxy基础),今天主要是在解决一个需要之后,觉得值得把它记录下来,所以就再写一篇,主要功能是,在弹出对话框后,隔N秒后自动隐藏,还有就是自动跳转!

效果如图
 
而所封装的代码如下

复制代码 代码如下:

// boxy对话框扩展
var Boxy_Extensions = {
options: {
title: '艺吧提示',
closeText: 'x'
},
//弹出后N秒后隐藏
alertDelayFun: function (info, timer, options) {
options = $.extend(this.options, options || {});
new Boxy("<div style='padding-left:50px;padding-right:50px;text-align:center;font-size:14px;'>" + info + "</div>", $.extend({ behaviours: function () {
setTimeout('$(".boxy-wrapper").hide();', timer);
}
}, options));
},
//弹出后,自动跳转
alertHrefFun: function (info, href, options) {
options = $.extend(this.options, options || {});
new Boxy("<div style='padding-left:50px;padding-right:50px;text-align:center;font-size:14px;'>" + info + "</div>", $.extend({ behaviours: function () {
location.href = href;
}
}, options));
}
}

因为options属性是公用的,所以把它提了出现,而每个方法有自己的options,如果在调用自己方法时传递了options,通过$.extend会把它

与类中options属性的内容进行合并(覆盖相关键的值,扩展新的键值),看来写JS也应该遵循面向对象的原则呀,呵呵!

时间: 2024-09-20 04:34:13

jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)_jquery的相关文章

JQuery.Boxy弹出层二

4.1.手动创建实例  代码如下 复制代码 <script type="text/javascript">         $(function() {             $("#a1").click(function() {         //实例化一个Boxy对象                 var box1 = new Boxy("<h3>这个参数是显示的内容</h3>" //显示内容    

jquery ui-两个弹出框,重定向不管用,页面不在跳转,方法和action都调用,就是不管用,下面是一个截图,

问题描述 两个弹出框,重定向不管用,页面不在跳转,方法和action都调用,就是不管用,下面是一个截图, 解决方案 用fiddler看下,你的数据有没有提交.特别是,你是客户端跳转还是服务器跳转.http://blog.csdn.net/class_horse/article/details/44264515 解决方案二: 你的提交用的ajax吧.ajax请求和普通浏览器请求不一样,ajax不会获取响应头控制浏览器进行跳转的,你需要ajax返回后检查内容,然后用location.href='xx

使用jquery制作弹出框效果_jquery

非常不错的国产JS弹出框插件,由前端工程师alien开发,提供多种类型的自定义对话框,使用方法简单,浏览器兼容性好,支持的弹出框模式有: alert:普通提示(警告)对话框 confirm:询问(确认)对话框 message:简单消息对话框(无title.无按钮) iframe:在对话框中嵌入一个iframe tip:带有小三角指向的小tip dialog:最基础的自定义对话框 var jDialogId = []; (function ($) { $.jDialog = function (o

JQuery.Boxy 弹出层的实例

 代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title></t

使用jquery制作弹出框效果

 非常不错的国产JS弹出框插件,由前端工程师alien开发,提供多种类型的自定义对话框,使用方法简单,浏览器兼容性好,支持的弹出框模式有: alert:普通提示(警告)对话框 confirm:询问(确认)对话框 message:简单消息对话框(无title.无按钮) iframe:在对话框中嵌入一个iframe tip:带有小三角指向的小tip dialog:最基础的自定义对话框 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 2

基于jQuery的弹出框插件_jquery

html如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-e

JQuery实现弹出框,显示后台抛的异常消息

问题描述 如题,大家有啥实施经验可供参考?尽量贴代码. 解决方案 解决方案二:没人回消息解决方案三:你这个问题描述的一点都不清楚怎么回答你啊解决方案四:将后台异常信息存放在reuqest.setArrtbite('error',异常信息);在jsp中先判断一下${error是否为空,}不为空,则显示弹出层,在弹出层中显示${error};

jQuery boxy弹出层插件中文演示及使用讲解_jquery

使用该jQuery插件 要想使用该jQuery插件,需要把$(selector).boxy();放在document.ready中.使用合适的选择器表达式替换这里的"selector",例如:"a[rel=boxy],form.with-confirmation".这会给匹配的元素附加一些行为,如下: 一个href属性中如果锚点包含#,则此锚点相对应的ID的DOM元素的内容就会被添加到boxy对话框中. 如果href锚点内容为其他一些东西,则会试图使用Ajax载入其

手机-使用bootstrap后jQuery弹出框问题

问题描述 使用bootstrap后jQuery弹出框问题 原来使用的是jQuery的$message.confirm弹出框没有问题,引入bootstrap后,手机端的弹出框会出现一块阴影部分,是怎么回事!如图左上角阴影图片说明 解决方案 使用jQuery弹出层,信息框居中 解决方案二: 你最好贴一下源码 然后看样子很像是div层级 或者是你对应的bt的核心样式版本号 这两个方向看看 解决方案三: 应该是样式的问题,你可以用google chrome在电脑上模拟一下手机客户端,然后分析是不是样式重