`

解决DIV盖住select的方法

    博客分类:
  • JAVA
阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>Enve</title>
<meta http-equiv=content-type content="text/html; charset=gb2312">
<meta content="MSHTML 6.00.3790.2541" name=GENERATOR>
<script>
function createEnvelopDiv(Div)
{
    var gap = 0;
    if(navigator&&navigator.userAgent.toLowerCase().indexOf("msie") == -1)
    {
        gap = 2;
    }

    var displayDiv = Div;
    if(typeof(displayDiv.envelopDiv) == "undefined")
    {
        // create a div to envelop
        var tEnvelopDiv = document.createElement("DIV");

        // define the envelopDiv's style
        tEnvelopDiv.style.left   = "-1000000";
        tEnvelopDiv.style.top    = "-1000000";
        tEnvelopDiv.style.width  = "0";
        tEnvelopDiv.style.height = "0";
        tEnvelopDiv.style.zIndex = 10000;

        // create a iframe
        var tEnvelopIframe = document.createElement("IFRAME");
        var tDate = new Date();
        var tEnvelopIframeId = "envelopiframe" + tDate.getTime();
        tEnvelopIframe.id = tEnvelopIframeId;
        tEnvelopIframe.name = tEnvelopIframeId;

        // define the iframe's style
        tEnvelopIframe.style.position = "absolute";
        tEnvelopIframe.style.left     = "-1000000";
        tEnvelopIframe.style.top      = "-1000000";
        tEnvelopIframe.style.zIndex   = tEnvelopDiv.style.zIndex-1;
        tEnvelopIframe.frameBorder    = "1";
        tEnvelopIframe.src            = "javascript:false;";

        tEnvelopDiv.appendChild(tEnvelopIframe);

        displayDiv.envelopDiv = tEnvelopDiv;
        displayDiv.envelopDiv.EnvelopIframeId = tEnvelopIframeId;

        displayDiv.parentNode.insertBefore(displayDiv.envelopDiv,displayDiv);

    }

    // get the iframe
    tEnvelopDivIframeId = displayDiv.envelopDiv.EnvelopIframeId;
    if(frames&&(frames[tEnvelopDivIframeId]&&frames[tEnvelopDivIframeId].frameElement))
    {
        tIframe=frames[tEnvelopDivIframeId].frameElement;
    }
    else
    {
        tIframe=document.getElementById(tEnvelopDivIframeId);
    }

    tIframe.style.left   = displayDiv.style.left;
    tIframe.style.top    = displayDiv.style.top;
    tIframe.style.width  = displayDiv.offsetWidth-2*gap+"px";
    tIframe.style.height = displayDiv.offsetHeight-2*gap+"px";
    tIframe.style.display = displayDiv.style.display;
    tIframe.style.visibility = displayDiv.style.visibility;
    displayDiv.style.zIndex = displayDiv.envelopDiv.style.zIndex+1;

    return false;
}
</script>
</head>
<body>
<select name="ddd" style="position:absolute;font-size:14px;top:196px;left:106px;">
    <option>select</option>
</select>
<div id="Div1" style="position:absolute;font-size:14px;top:126px;left:106px;width:210px;height:100px;background-color:red;border:green 2px solid">
盖不住select的Div1
</div>
<div id="Div2" style="position:absolute;font-size:14px;top:180px;left:160px;width:150px;height:50px;background-color:white;border:blue  1px solid">
盖住select的Div2<br />
&nbsp;&nbsp;3秒后左移并遮盖
</div>
<script>
t = document.getElementById("Div2");

setTimeout("test()", "3000");
function test()
{
    t.style.left = "140px";
    createEnvelopDiv(t);
}
</script>
</body>
</html>

 

 

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

相关推荐

    解决div总是被select遮挡的问题.rar

    在本案例中,"解决div总是被select遮挡的问题.rar"提供了解决方案,通过引入一个透明的`iframe`来规避这一现象。 首先,我们需要理解Z轴顺序的概念。在CSS中,`z-index`属性用于指定元素在堆叠上下文中的层级。具有...

    Div 制作的SELECT

    用DIV模仿SELECT下拉框 function replaceSelects() { try{ for (i=0;i;i++){ // 隐藏 select selects[i].style.display = 'none'; select_divTag = document.createElement('div'); select_divTag.id = ...

    解决IE6中 Div层挡不住Select组件

    "解决IE6中 Div层挡不住Select组件"这个问题是一个典型的例子,它反映了IE6在CSS层叠样式和Z-index处理上的独特行为。 在现代浏览器中,我们可以利用CSS的`z-index`属性来控制元素的前后堆叠顺序,从而让某些元素...

    Div实现仿SelectDemo

    本教程将围绕“Div实现仿SelectDemo”这一主题,探讨如何利用jQuery创建一个高度可定制的Select插件。 首先,"Div实现仿SelectDemo"意味着我们不再依赖HTML的Select标签,而是用一个简单的Div元素作为基础结构。...

    div+css select效果

    然后,我们将在`div`内嵌套一个`&lt;select&gt;`元素,并将其`position`设置为`absolute`,这样可以使其脱离正常文档流并定位在`div`的特定位置。 接下来,我们需要用CSS来定制`select`的外观。由于`select`元素在不同...

    select ——使用DIV 实现 Select

    select ——使用DIV 实现 Select js源码

    解决IE6 中select 穿透 div 等层的问题

    这个IFrame可以解决IE6中的z-index问题,使元素能够正确地遮挡住`&lt;select&gt;`。使用bgiframe时,需要引入jQuery库和bgiframe插件,并调用相应的方法将插件应用到目标元素上。 2. 创建透明IFrame:不依赖jQuery的情况...

    div 模拟select 单选

    select 在ie6下覆盖div bug 解决方案。 div 模拟select 单选 在 body onload事件中调用init_select方法就可,参数传相关背景图片就可。我都已经放到资源包下了。

    DIV模拟select下拉框

    "DIV模拟select下拉框"就是一种利用JavaScript库,如jQuery,来实现这一目标的技术。它通过用CSS样式化的DIV元素替换原生的SELECT元素,从而提供更灵活的外观和交互体验。 标题中的"DIV模拟select下拉框"意味着我们...

    div模拟select实用版

    在网页设计中,有时出于美观或者交互性的考虑,开发者会使用`div`元素来模拟`select`下拉菜单的效果。这种做法通常被称为“div模拟select”。本教程将深入探讨如何利用`div`实现这一功能,并提供一个实用版的示例。 ...

    divcss模拟select

    divcss模拟select 下拉框 select 改变样式

    div模拟下拉菜单(select)jquery插件.gz

    在这个"div模拟下拉菜单(select)jquery插件.gz"压缩包中,包含的就是这样一个基于`div`和jQuery的自定义下拉菜单解决方案。 首先,`demo.html`是演示页面,它展示了如何在实际项目中应用这个插件。这个页面会包含一...

    让div浮动在select之上的完美解决方案!多浏览器兼容

    5. **利用JavaScript进行辅助:** 如果上述CSS方法仍无法解决问题,可以借助JavaScript检测用户对`select`元素的操作,然后动态改变`div`的样式,使其始终位于`select`之上。 6. **测试与优化:** 在多种浏览器环境...

    div+css模拟select

    总结,div+css模拟select是一种常见的前端技术,它结合了HTML、CSS和JavaScript的能力,提供了更加灵活和定制化的下拉菜单解决方案。虽然比原生`&lt;select&gt;`元素更复杂,但能够实现更丰富的交互和设计效果,是现代网页...

    div 模拟 select 多选

    div 模拟 select 多选 实现还有点bug,望大家一起改正。

    option挡住div解决方法

    Div下拉菜单被Select挡住的解决办法 下拉菜单 bbbbbbb ccccccc ccccccc ccccccc ccccccc test0 test1 ...Div被Select挡住,是一个比较常见的问题。...这个div就可以盖住select了. [Ctrl+A 全选 注:如需引入外部

    div模拟select自定义下拉列表框(jQuery)

    `div模拟select自定义下拉列表框`是一种常见做法,它利用JavaScript(如jQuery)和CSS来实现,可以提供比原生`&lt;select&gt;`元素更丰富的样式控制和交互体验。本篇将详细介绍这种技术及其应用。 一、为什么使用div模拟...

    限制select显示条数:div完全模拟select

    在做项目时我们有时会碰上这样的问题,如何限制select的选择条数,如果光凭借JS,JQ恐怕无法解决该问题 现在我们提供一种解决方法: 用div完全模拟select ( 即用配上CSS和jQuery,来打造出一个仿真的 ),来达到控制条...

    用div+jq高仿ie6的select表单随内容增加-2012-11-1

    用div+jq高仿ie6的select表单随内容增加 进行了一个升级,将其做成一个类似插件的形式; 在html中,依旧是应用传统的select进行布局,只需要给select一个class为toDiv,就可以动态的将select替换为已经设置好了的div...

    select实现div图层切换效果(jquery实现)

    在网页设计中,有时我们需要通过不同的交互方式来切换页面上的元素显示,比如通过下拉框(select)的选择来改变div图层的展示。本示例就是利用jQuery库来实现这样的功能,使得用户在select中选择不同的选项时,对应...

Global site tag (gtag.js) - Google Analytics