`
流浪鱼
  • 浏览: 1694030 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery bgiframe插件

 
阅读更多

IE6中有一个特别的地方,那就是 div 无法覆盖 select ,这就导致如果网页上有浮动区块出现在下拉菜单上面时,在IE6里会看到下拉框总是在浮动区块上面,无论浮动区块的 z-index 的值有多大都没用。不过,IE6中iframe 可以覆盖 select ,而 div 可以覆盖 iframe ,所以解决办法一个就是用Z轴高度更高的Iframe元素,包裹或覆盖住下拉列表框或浮动区块,另一个就是为下拉列表或浮动区块添加一个Iframe作为 子元素。

如图:



 
jQuery插件bgiframe就是用来解决以上问题,原理采用了上面的第二种,就是用JS动态在指定的容器内开始添加一个iframe对象,来实现我们需要的效果。

官方网址:https://github.com/brandonaaron/bgiframe

使用方法为:

$(document).ready(function() { 
  //test为div的id
  $('#test').bgiframe(); 
});  

 

 

 

 

 

  • 大小: 5.8 KB
分享到:
评论

相关推荐

    前端项目-jquery-bgiframe.zip

    jQuery-bgiframe插件正是为了解决这个顽固的问题。它通过在目标元素下方创建一个透明的iframe,巧妙地规避了IE的z-index渲染错误。这个iframe就像是一个“背景框架”,可以确保元素的z-index正确生效,即便是在有...

    bgiframe_2.1.1.zip

    在实际项目中,我们需要将这个文件引入到HTML页面中,并且在使用jQuery dialog时,正确调用bgiframe插件,以确保对话框背景的正常显示。 使用方法通常是这样的: ```html <script src="jquery.js"></script> <!-- ...

    ie6下select遮挡div

    1. 使用jQuery bgiframe插件:该插件创建一个透明的iframe层,将被遮挡的div覆盖在select之上,从而避免遮挡问题。 2. 避免使用绝对或相对定位:改用其他布局方式,如使用浮动(float)或Flexbox(对于现代浏览器)...

    jquery日历插件

    `jquery.bgiframe.min.js`是一个jQuery插件,主要用于解决在IE浏览器中,浮动元素与背景图像之间的Z-index问题。在某些情况下,它可以帮助确保日历插件在所有浏览器上的表现一致。 `source`目录可能包含了插件的源...

    bgiframe插件解决IE6 DIV档不住下拉选择框

    -- 引入jQuery和bgiframe插件 --> <script src="https://code.jquery.com/jquery-1.x.min.js"></script> <script src="path/to/bgiframe.js"> /* 添加样式 */ #ly { position: absolute; top: 0; filter: ...

    jquery多选框

    4. `jquery.bgiframe.js`:这是一个jQuery插件,主要用于解决在IE6和IE7下浮动元素与背景图片重叠的问题,确保多选框在这些旧版浏览器中的正确显示。 5. `前端页面.text`:这个文件很可能包含了一个或多个示例页面...

    jquery实现autocomplete插件(文本框下拉选项).zip

    6. `jquery.bgiframe.pack.js`:这个插件用于解决IE浏览器的背景透明问题,使下拉列表在所有浏览器中都能正确显示。 在使用jQuery实现Autocomplete插件时,主要步骤如下: 1. 引入依赖:确保HTML文件中引入了...

    JS147-46jquery日历实用代码

    使用这个插件时,你需要在HTML页面中引入jQuery库、bgiframe插件以及日历插件的JavaScript和CSS文件。然后,通过jQuery选择器找到需要添加日历功能的元素,并调用`$.datePicker()`方法进行初始化。可以设置各种参数...

    jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误

    然而,随着浏览器的更新和CSS3的普及,这些问题在现代浏览器中已经得到了更好的处理,因此,如今使用bgiframe插件的需求已经大大减少。 在升级或优化网站时,遇到此类兼容性问题,一般可以考虑以下策略: 1. **更新...

    jquery.dialog插件参数说明

    ### jQuery Dialog插件参数详解 在前端开发领域,jQuery因其简单、灵活且强大的特性而备受开发者青睐。其中,`jQuery.dialog`插件更是为创建弹出对话框提供了丰富的功能和高度的自定义选项,极大地提升了网页的交互...

    经典jquery日历代码

    bgiframe是jQuery的一个插件,主要用于解决IE6下的透明背景问题。在某些情况下,它可以使元素的背景在IE6中正确显示,特别是在浮动元素和绝对定位的情况下。 6. **使用说明.txt**: 这个文件提供了关于如何集成和...

    JQuery弹出恒定居中的窗口

    7. `jquery.bgiframe.min.js`:这是一款jQuery插件,用于解决IE浏览器下浮动元素与背景图片的Z-index问题,确保弹出窗口能够正确显示在其他内容之上。 综上所述,这个项目展示了如何使用jQuery和CSS来创建一个功能...

    jquery loading

    `jquery.bgiframe.min.js`是jQuery的一个插件,用于解决某些情况下背景透明度问题,特别是在Internet Explorer浏览器中的兼容性问题。当加载等待效果覆盖整个页面时,这个插件可以帮助确保加载图层正确地覆盖在所有...

    解决DIV在IE下被下拉列表select穿透的问题(二)

    在实际应用中,首先需要引入jQuery库和`jquery.bgiframe.js`插件文件,然后选择要添加背景iframe的元素,调用`.bgiframe()`方法。例如: ```javascript $("#myDiv").bgiframe(); ``` 在这个例子中,`#myDiv`是需要...

    jQuery提示插件qTip2用法分析(支持ajax及多种样式)

    jQuery提示插件qTip2是一款强大的工具,它扩展了jQuery的功能,允许开发者创建美观且功能丰富的提示信息。这款插件支持Ajax加载内容以及多种样式设置,使得提示信息不仅能够显示静态文本,还能动态获取远程数据,...

    点击input输入框弹出选择层(基于jquery)

    4. **jQuery插件**:在这个项目中,我们还引用了两个jQuery插件:`jquery.bgiframe.js`和`jquery-1.3.1.js`。`jquery.bgiframe.js`是一个旧版的jQuery插件,用于解决IE浏览器下的背景透明问题,确保选择层能正确显示...

    jquery.multiSelect下拉多选

    6. `jquery.bgiframe.min.js`:这是一个背景iframe插件,用于解决在某些IE浏览器中的Z-index问题,确保下拉框能正确显示在其他元素之上。 使用jQuery.multiSelect的基本步骤如下: 1. 在HTML中创建一个`<select>`...

    Jquery点击输入框弹出层

    提供的`jquery.bgiframe.js`可能是用于解决IE浏览器下背景透明问题的插件,但在现代浏览器中,这个问题通常已经不再存在,因此在新项目中可能不需要使用。至于`lazyMan建站.url`,看起来是一个链接,可能是与建站...

    JQuery写的日期控件

    `jquery.bgiframe.min.js` 是一个JQuery插件,它创建了一个背景iframe,用于解决某些浏览器下的Z-index问题,确保日期弹出框在所有情况下都能正确显示。 `datePicker.css` 文件包含了日期控件的样式定义,它决定了...

    java excel 下载功能插件

    `jquery.bgiframe.min.js`是一个jQuery插件,提供背景iframe,解决某些浏览器的Z-index问题。`images`目录可能包含该插件的图标和其他视觉元素。`demo`可能是演示如何使用这些插件的示例代码。 5. **响应式编程**: ...

Global site tag (gtag.js) - Google Analytics