后隔N秒后自动遮掩,js弹出层之1

对此
Boxy弹出框的运用在此之前写过一些作品(查看jquery.boxy基础),今日最首假使在消除二个亟待之后,感觉值得把它记录下来,所以就再写一篇,首要成效是,在弹出对话框后,隔N秒后自动遮盖,还也有就是活动跳转!

复制代码 代码如下:

4.1、手动成立实例

职能如图
澳门葡京 1 
而所封装的代码如下

/*
<a href=”a.html” onclick=”return $.qbox(this);” >
<a href=”a.html” onclick=”return qBox.iFLoad(this);” >
<a href=”a.html” onclick=”return q博克斯.iFrame({src:’b.html’})” >
Boxy属性不改变 新扩大 w、h、src 属性
qBox.Close();关闭当前窗口
qBox.iFSrc({}); 更动最近窗口的性质及针对 Boxy属性不改变 新添 w、h、src
属性
*/

复制代码 代码如下:

复制代码 代码如下:

//Boxy插件的恢宏
jQuery.fn.qbox=function(options){
var node = this.get(0).nodeName.toLowerCase();
var self=this;
if (node == ‘a’) {
$(this).attr(‘onclick’,”).unbind(‘click’).click(function(){return
false;});
options =
$.extend(options||{},{src:this.get(0).getAttribute(‘href’),beforeUnload:function(){
$(self).unbind(‘click’).click(function(){return
$(this).qbox(options);});}});
}
qBox.iFLoad(options);
return false;
}
var qBox=function(){};
jQuery.extend(qBox,{
aDgs:[],
iFrame:function(op){
op =
jQuery.extend({title:’提示’,w:320,h:200,src:’about:blank’,modal:false,fixed:false,unloadOnHide:true},op),fm=parseInt(Math.random()*(1000*987));//
var dialog = new Boxy(“<b
id=\”ld”+fm+”\”>正在加载,请稍后….</b><iframe
id=\”_”+fm+”\” style=\”width:0;height:0;display:none;padding:0;\”
src=”+op.src+” frameborder=\”0\”
scrolling=\”no\”></iframe>”,op);

<script type=”text/javascript”>
$(function() {
$(“#a1”).click(function() {
//实例化贰个博克斯y对象
var box1 = new Boxy(“<h3>这些参数是呈现的开始和结果</h3>”
//呈现内容
,
{
title: “标题”, //对话框标题
modal: false, //是不是为情势窗口
afterHide: function(e) { alert(“dialog hide”); }, //掩饰时的回调函数
afterShow: function(e) { alert(“dialog show”); }, //呈现时的回调函数
closeText: “X”, //关闭功能开关的标题文字
draggable: true //是不是可以拖动
});
box1.resize(300, 100); //设置对话框的轻重
});
});
</script> <p>
<a href=”#” id=”a1″>4.1、手动创造八个实例</a>
</p>

// boxy对话框扩充
var Boxy_Extensions = {
options: {
title: ‘艺吧提醒’,
closeText: ‘x’
后隔N秒后自动遮掩,js弹出层之1。},
//弹出后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;’>”

jQuery(“#_”+fm).load(function(){
dialog.resize(op.w,op.h,function(){});
jQuery(“#ld”+fm).remove();
jQuery(“#_”+fm).css({‘padding’:’15px’,’display’:”});
});
qBox.aDgs.push(dialog);
return false;
},
Close:function(){
qBox.aDgs[qBox.aDgs.length-1].hide();
return false
},
iFSrc:function(op){
op = jQuery.extend({w:320,h:200,src:’about:blank’},op);
qBox.aDgs[qBox.aDgs.length-1].getContent().attr(“src”,”about:blank”);
qBox.aDgs[qBox.aDgs.length-1].setTitle(op.t);
qBox.aDgs[qBox.aDgs.length-1].tween(op.w,op.h,function(){qBox.aDgs[qBox.aDgs.length-1].getContent().attr(“src”,op.src).css({width:op.w,height:op.h});});
return false;
},
iFLoad:function(options){
var sr= jQuery(this).attr(“href”);
var op = jQuery.extend({src:sr},options);
qBox.iFrame(op);
return false;
}
});

澳门葡京 2

  • 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));
    }
    }

出处 cn795.cnblogs.com

测量检验开掘modal为true为形式窗口,也便是背景被遮罩时即使设置 draggable:
true拖动也是不行的。

因为options属性是公用的,所以把它提了产出,而各类方法有谈得来的options,若是在调用自个儿格局时传递了options,通过$.extend会把它

您恐怕感兴趣的稿子:

  • jQuery插件扩张实例【加多回调函数】
  • jQuery插件扩张extend的简单实现原理
  • jQuery插件扩充测量检验实例
  • jQuery插件formValidator自定义函数扩充成效实例详解
  • jQuery插件kin马克斯Show扩张效果用法实例
  • jquery事件机制扩充插件
    jquery鼠标右键事件
  • JQuery模板插件 jquery.tmpl
    动态ajax扩充
  • boxy基于jquery的弹出层对话框插件扩充应用
    弹出层选拔器
  • jQuery下扩充插件和进展函数的写法(无名氏函数使用的一级事例)
  • jQuery autocomplate
    自扩展插件、自动落成示范代码
  • 选用jQuery插件扩张识别浏览器内核与外壳的种类和版本的完成代码
  • jQuery插件扩充操作入门示例

5.1、常用对话框—提问框

与类中options属性的从头到尾的经过张开联合(覆盖相关键的值,扩展新的键值),看来写JS也相应根据面向对象的标准呀,呵呵!

复制代码 代码如下:

你可能感兴趣的小说:

  • js,jquery滚动/跳转页面到内定地方的贯彻思路
  • jQuery
    锚点跳转滚动条平滑滚动一句话代码
  • jQuery完结延迟跳转的艺术
  • jQuery移动web开荒之页面跳转和加载外界页面包车型客车兑现
  • jQuery
    点击图片跳转上一张或下一李提香能的达成代码
  • jquery ajax
    向后台传递数组参数示例
  • jquery
    post方式传递多个参数值后台以数组的不二等秘书技开始展览收纳
  • Jquery之Bind方法参数传递与接收的两种办法
  • JQuery.ajax传递中文参数的化解方式推荐
  • jquery
    ajax传递普通话参数乱码难题及消除措施求证
  • jQuery达成浏览器之间跳转并传递参数作用【辅助汉语字符】

//提问框
$(“#a2”).click(function() {
Boxy.ask(“凤哥儿最地道的部分是?”, //问题
[“脸皮”, “小嘴巴”, “知识渊博”], //可选项按键
function(val) { alert(val) }, //回调方法
{title:”测验”,modal:false} //boxy属性设置
);
}); <p>
<a href=”#” id=”a2″>5.1、弹出提问框</a>
</p>

澳门葡京 3

Boxy.ask(question, answers, callback,
options)方法的4个参数question表示提问;answers提问选用项,一般为数组;callback为回调方法;options是boxy弹出框的的本性对象,见4.1。

5.2、常用对话框—警告框

复制代码 代码如下:

//警告框
$(“#a3”).click(function() {
Boxy.alert(“那是警示消息”, //提示音讯
function(val) { alert(val); }, //回调方法
{title:”提示”}); //boxy属性
}); <p>
<a href=”#” id=”a3″>5.2、警告框</a>
</p>

澳门葡京 4

Boxy.alert(message, callback,
options)方法的3个参数message表示警告消息;callback为回调方法;options是boxy弹出框的的本性对象,见4.1。

5.3、常用对话框—确认框

复制代码 代码如下:

//确认框
$(“#a4”).click(function() {
Boxy.confirm(“你明确要看凤辣子的相片吧?”, //确认提醒音讯
function() { alert(“被骗了”) }, //点击确认后的回调音讯
{ title: “测量检验”, modal: false }); //boxy属性设置
}); <p>
<a href=”#” id=”a4″>5.3、确认框</a>
</p>

澳门葡京 5

Boxy.confirm(message, callback,
options)方法的3个参数message表示确定提醒新闻;callback为回调方法,唯有一些击确认时才会进行;options是boxy弹出框的的属性对象,见4.1。

 

6、API参数

方法:
Boxy.load(url, options)
以贰个U奇骏L加载内容并以Boxy对话框的花样突显。协理以下的一部分取舍参数:
•类型 – HTTP方法,默认为GET
•缓存 –
假诺是true,缓存内容三番五次通话。约等于缓存选项传递到jQuery的Ajax方法。暗中同意:false。
•过滤 – jQuery的表达式,用于过滤远程内容。
(任何其它钦定的选项将被传送到boxy的构造函数中)

Boxy.get(element)
归来蕴涵成分的实例,举个例子:<a href=”#”
onclick=”Boxy.get(this).hide();”>关闭对话框</a>

Boxy.ask(question, answers, callback, options)
来得情势,即非可关闭对话框,允许用户挑选选项。难题是要展示给用户的音信。答案是几个数组或任何或然的回答的数列。回调函数将接收选定的回复,那是不是是要求的值或相应的密钥要依照三个数组或答案数列是还是不是业已提供了。options是一种额外的可选设置选项传递给对话框的构造函数。

Boxy.alert(message, callback, options)
展现方式,非可关闭对话框突显新闻给用户。
小心:此方式并不是为着替代浏览器本地window.alert()函数提供,因为它从不力量阻止程序实践,在对话框是可知的时候。

Boxy.confirm(message, callback, options)
展现情势,非可关闭对话框显示的隐含鲜明和撤回开关的消息。回调只会在用户选取了“鲜明”时被调用。
只顾:此格局并非为着替代浏览器提供的地面window.confirm()函数,因为它从不力量在对话框可知时挡住程序推行的。

Boxy.linkedTo(ele)
回去已通过试行器构造函数选项连接DOM成分的boxy实例。

Boxy.isModalVisible()
回来true如若任何形式对话框是当下可知的,不然再次来到false。

new Boxy(element, options)
构造函数;创造叁个新的boxy对话框。element是对话框的内容;任何有效的参数,jQuery的$()函数在此处也是行得通的。options是四个安插选项的散列,见上边详细的素材。

estimateSize()
当对话框不可知的时候预计其大小。纵然当前对话框可知,不要选拔此措施,使用getSize()代替。

getSize()
以数组的款式[width, height]重回对话框的深浅。

getContentSize()
回去对话框内容区域的大小。私下认可情状下,指在对话框框架里的满贯,不包含标题栏。

getPosition()
以[x,y]数组格局再次来到最顶层对话框的左上角坐标。

getCenter()
以[x,y]数组形式再次回到最顶层对话框的大旨点的坐标。

getInner()
回去二个jQuery对象包装对话框的当中区域-框架内包蕴标题栏一切。

澳门葡京,getContent()
回来二个jQuery对象包装对话框的开始和结果区域-框架内的一体,不包含标题栏。

setContent(newContent)
设置对话框中的内容,任何对$()有效的参数也对安装的新剧情使得。可链接。

moveTo(x,y)
运动对话框到左上角为(x,y)的职位,可链接。

centerAt(x,y)
把对话框移动到基本坐标为(x,y)的职位上。

center(axis)
挪动对话框,使其在视界的中心。可选参数axis能够是”x”,”y”中的任性八在那之中坚轴。可链接。

resize(w,h,after)
再度调节对话框的高宽到[w,h],完毕后施行回调函数,回调函数将承受Boxy实例作为参数。可链接。

tween(w,h,after)
卡通补间对话框高宽到[w,h],完结后实行回调函数,回调函数将接受博克斯y实例作为参数。可链接。

isVisible()
一经当前对话框可知,则赶回true,不然重返false。

show()
来得对话框,可链接。

hide(after)
躲藏对话框,after为可选回调函数,落成后实践。可链接。

toggle()
接触对话框的显隐属性。可链接。

hideAndUnload(after)
在隐蔽后当即试行卸载。在卸载此前执行after回调函数。可链接。

unload()
从DOM中删除对话框,切断其与试行部门的维系,如若部分话。一旦现身三个对话框已被卸载它的其余更进一竿行动都是未定义的。

toTop()
将眼下对话框移动到其它具备对话框的上部。可链接。

getTitle()
以HTML的款型再次回到对话框的标题。

setTitle(t)
安装对话框的标题为t,可链接。

属性:

澳门葡京 6

 

CSS选择器
.boxy-wrapper .title-bar
div包装的自动生成的题目栏

.boxy-wrapper .title-bar h2
标题栏的从头到尾的经过

.boxy-wrapper .title-bar.dragging
拖拽时候的标题栏

.boxy-wrapper .title-bar .close
私下认可的关门对话框的实施器

.boxy-inner
其间区域,满含标题栏

.boxy-content
内部区域,不包含标题栏。这一个class类将被活动增多到传递给Boxy的构造函数的别的因素。

.boxy-wrapper .question
透过Boxy.ask()成立的,满含难点文字

.boxy-wrapper .answers
经过Boxy.ask()创制的,包罗应答的按键

.close
这一class类的别的内容的单击事件将关乎到关门对话框上。

 

选拔器的外框圆角效果是选用png图片达成的,假诺想改换透明程度,能够采纳ps修改图片;若是不思虑IE6的话,能够运用另一种常用的圆角方法(不用图片只用css样式)。

官网:
译文:

你或者感兴趣的稿子:

  • js制作带有遮罩弹出层达成登入注册表单特效代码分享
  • js达成div弹出层的法子
  • 接纳js达成关闭js弹出层的窗口
  • jquery.artwl.thickbox.js
    叁个极度简单好用的jQuery弹出层插件
  • js
    点击页面别的地点关闭弹出层(示例代码)
  • js写二个弹出层并锁屏效果落到实处代码
  • js与css达成弹出层覆盖全部页面包车型地铁点子
  • js+css
    实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
  • Js制作简便弹出层DIV在页面居中
    中间显示遮罩的具体方法
  • 原生js完结弹出层登入拖拽功效

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website