`
01jiangwei01
  • 浏览: 540829 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery.boxy.js select ie6下无法遮住的bug

 
阅读更多

[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 &amp; 1) inner.stop().animate(target.inner, 300);
this.boxy.stop().animate(target.boxy, 300, hideComplete);
} else {
hideComplete();
}

return this;

}

 

分享到:
评论

相关推荐

    jquery-boxy控件

    **jQuery Boxy控件详解** 在网页开发中,交互性的增强是提升用户体验的关键因素之一。jQuery作为一款强大的JavaScript库,提供了丰富的插件来满足开发者的需求。"jQuery Boxy控件"正是这样一个工具,它旨在创建出...

    jquery > boxy 弹出层

    使用Boxy插件,开发者需要先引入jQuery库和Boxy的JavaScript及CSS文件。接着,可以使用JavaScript函数来创建和控制弹出层,例如: ```javascript $(function() { // 创建一个简单的警告对话框 $("警告!这是一个...

    js弹出框轻量级插件jquery.boxy使用介绍

    Boxy声称其兼容性良好,适用于大多数现代浏览器,包括IE6及更高版本。不过,在不同的浏览器和设备上测试总是最佳实践,以确保用户在各种环境下都能获得一致的体验。 ### 总结 jQuery Boxy插件是一个强大且灵活的...

    jquery-plugin-boxy.zip

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript的使用,尤其是在处理DOM操作、事件处理和动画效果等方面。"jquery-plugin-boxy.zip"这个压缩包包含了一个jQuery插件,名为Boxy,它是...

    jquery.boxy插件的iframe扩展代码

    ### jQuery.boxy 插件的 iframe 扩展详解 #### 一、概述 在Web开发领域,jQuery 是一个非常流行的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互等操作。而`jQuery.boxy`插件则是基于...

    弹出层之1:JQuery.Boxy (一) 使用介绍

    1、下载并修改插件 可以在官网上下载到最新版(http://plugins.jquery.com/files/boxy-0.1.4.zip),到我写这些文字的时候最新版为0.1.4版,下载解压后有1个主要的js文件:jquery.boxy.js;1个css文件;还有4个图片用于...

    jQuery boxy演示15种弹出层调用方法

    2. 下载Boxy插件的压缩包,解压后将`boxy.css`和`jquery.boxy.js`文件添加到项目中。 3. 在HTML文件中通过`&lt;link&gt;`标签引入CSS文件,通过`&lt;script&gt;`标签引入jQuery和Boxy的JS文件,并确保jQuery在Boxy之前加载。 **...

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

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

    jQuery_boxy弹出层对话框插件中文演示及讲解

    页面左侧有固定定位的导航栏(IE6为绝对定位),方便用户快速跳转到相应的内容。页面主体部分是逐句翻译的官方文档,尽管有些句子可能较为拗口,但仍然有助于读者理解插件的使用方法。 1. 插件的使用: - 利用...

    JQuery boxy插件在IE中边角图片不显示问题的解决

    JQuery boxy插件很好用,但也会出现一些问题,比如弹出框的边角在IE中不能显示。本博文将来解决这个问题。将boxy插件引用到项目中后会有一个boxy.css文件和jquery.boxy.js文件。在boxy.css文件中有给弹出框设置四个...

    jquery-boxy 0.1.4 好用的弹出层

    《jQuery Boxy 0.1.4:一款优秀的弹出层插件详解》 在Web开发中,弹出层(也称作对话框或模态窗口)是不可或缺的一部分,它们通常用于显示重要的信息、提示、表单或者进行用户交互。jQuery Boxy 0.1.4就是这样一款...

    jquery-plugin-boxy

    "jQuery-plugin-boxy"是一个基于jQuery的弹出框插件,用于创建可定制的对话框和模态窗口。这个插件提供了丰富的功能和灵活性,帮助开发者在网页中轻松实现各种类型的提示信息或交互式表单。 1. **jQuery库基础**: ...

Global site tag (gtag.js) - Google Analytics