[code="js"]// Returns true if this dialog is visible, false otherwise
isVisible: function() {
return this.visible;
},
//-------------------------------------
//弹层大小会改变时会用到这个方法,Boxy.get(this).auto_resize();
auto_resize:function(){
if (this.options.useIframe == true) {
this.temp_iframe.width(this.getSize()[0]);
this.temp_iframe.height(this.getSize()[1]);
this.temp_iframe.css({left:this.getPosition()[0],
top:this.getPosition()[1]});
}
},
//-------------------------------------
上面加粗的是 新增的方法
修改show 和hide方法
[code="js"]show: function() {
if (this.visible) return;
if (this.options.modal) {
var self = this;
Boxy._setupModalResizing();
this.modalBlackout = jQuery('')
.css(jQuery.extend(Boxy._cssForOverlay(), {
zIndex: Boxy._nextZ(), opacity: Boxy.MODAL_OPACITY
})).appendTo(document.body);
this.toTop();
if (this.options.closeable) {
jQuery(document.body).bind('keypress.boxy', function(evt) {
var key = evt.which || evt.keyCode;
if (key == 27) {
self.hide();
jQuery(document.body).unbind('keypress.boxy');
}
});
}
}
this.getInner().stop().css({width: '', height: ''});
//-------------------------------------
if(this.options.useIframe == true)
{
var ifreamWidth = this.getSize()[0];
var ifreamHeight = this.boxy.height();
this.temp_iframe = jQuery('<div style="background-color: #f00;position:absolute"><iframe style="width:'+ifreamWidth+'px; height:'+ifreamHeight+'px " frameborder="0"></iframe></div>').css({
zIndex:Boxy._nextZ()
});
this.temp_iframe.appendTo(document.body);
this.toTop();
}
//-------------------------------------
this.boxy.stop().css({opacity: 1}).show();
this.visible = true;
this.boxy.find('.close:first').focus();
this._fire('afterShow');
this.auto_resize();
return this;
},
// Hide this boxy instance
hide: function(after) {
if (!this.visible) return;
var self = this;
if (this.options.modal) {
jQuery(document.body).unbind('keypress.boxy');
this.modalBlackout.animate({opacity: 0}, function() {
jQuery(this).remove();
});
}
//-------------------------------------
if(this.options.useIframe == true)
{
this.temp_iframe.animate({opacity: 0}, function() {
jQuery(this).remove();
});
//-------------------------------------
}
var target = { boxy: {}, inner: {} },
tween = 0,
hideComplete = function() {
self.boxy.css({display: 'none'});
self.visible = false;
self._fire('afterHide');
if (after) after(self);
if (self.options.unloadOnHide) self.unload();
};
if (this.options.hideShrink) {
var inner = this.getInner(), hs = this.options.hideShrink, pos = this.getPosition();
tween |= 1;
if (hs === true || hs == 'vertical') {
target.inner.height = 0;
target.boxy.top = pos[1] + inner.height() / 2;
}
if (hs === true || hs == 'horizontal') {
target.inner.width = 0;
target.boxy.left = pos[0] + inner.width() / 2;
}
}
if (this.options.hideFade) {
tween |= 2;
target.boxy.opacity = 0;
}
if (tween) {
if (tween & 1) inner.stop().animate(target.inner, 300);
this.boxy.stop().animate(target.boxy, 300, hideComplete);
} else {
hideComplete();
}
return this;
}
分享到:
相关推荐
**jQuery Boxy控件详解** 在网页开发中,交互性的增强是提升用户体验的关键因素之一。jQuery作为一款强大的JavaScript库,提供了丰富的插件来满足开发者的需求。"jQuery Boxy控件"正是这样一个工具,它旨在创建出...
使用Boxy插件,开发者需要先引入jQuery库和Boxy的JavaScript及CSS文件。接着,可以使用JavaScript函数来创建和控制弹出层,例如: ```javascript $(function() { // 创建一个简单的警告对话框 $("警告!这是一个...
Boxy声称其兼容性良好,适用于大多数现代浏览器,包括IE6及更高版本。不过,在不同的浏览器和设备上测试总是最佳实践,以确保用户在各种环境下都能获得一致的体验。 ### 总结 jQuery Boxy插件是一个强大且灵活的...
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript的使用,尤其是在处理DOM操作、事件处理和动画效果等方面。"jquery-plugin-boxy.zip"这个压缩包包含了一个jQuery插件,名为Boxy,它是...
### jQuery.boxy 插件的 iframe 扩展详解 #### 一、概述 在Web开发领域,jQuery 是一个非常流行的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互等操作。而`jQuery.boxy`插件则是基于...
1、下载并修改插件 可以在官网上下载到最新版(http://plugins.jquery.com/files/boxy-0.1.4.zip),到我写这些文字的时候最新版为0.1.4版,下载解压后有1个主要的js文件:jquery.boxy.js;1个css文件;还有4个图片用于...
2. 下载Boxy插件的压缩包,解压后将`boxy.css`和`jquery.boxy.js`文件添加到项目中。 3. 在HTML文件中通过`<link>`标签引入CSS文件,通过`<script>`标签引入jQuery和Boxy的JS文件,并确保jQuery在Boxy之前加载。 **...
对于 Boxy弹出框的使用之前写过一些文章(查看jquery.boxy基础),今天主要是在解决一个需要之后,觉得值得把它记录下来,所以就再写一篇,主要功能是,在弹出对话框后,隔N秒后自动隐藏,还有就是自动跳转!...
页面左侧有固定定位的导航栏(IE6为绝对定位),方便用户快速跳转到相应的内容。页面主体部分是逐句翻译的官方文档,尽管有些句子可能较为拗口,但仍然有助于读者理解插件的使用方法。 1. 插件的使用: - 利用...
JQuery boxy插件很好用,但也会出现一些问题,比如弹出框的边角在IE中不能显示。本博文将来解决这个问题。将boxy插件引用到项目中后会有一个boxy.css文件和jquery.boxy.js文件。在boxy.css文件中有给弹出框设置四个...
《jQuery Boxy 0.1.4:一款优秀的弹出层插件详解》 在Web开发中,弹出层(也称作对话框或模态窗口)是不可或缺的一部分,它们通常用于显示重要的信息、提示、表单或者进行用户交互。jQuery Boxy 0.1.4就是这样一款...
"jQuery-plugin-boxy"是一个基于jQuery的弹出框插件,用于创建可定制的对话框和模态窗口。这个插件提供了丰富的功能和灵活性,帮助开发者在网页中轻松实现各种类型的提示信息或交互式表单。 1. **jQuery库基础**: ...