Question

我正在尝试在页面上创建一个浮动框架。我不知道如何创建一个，所以我用Google搜索并找到this website to create floating frame.我能够将框架嵌入到我的页面中，但由于页面有很多其他元素，因此它与一些或其他元素重叠。 body。我尝试将框架的div放在body的不同部分，但每次都有一些元素重叠。

我将网站生成的代码作为样本放置（因为我的页面代码太长而且由PHP生成，所以在这里避免使用它）

<script language="JavaScript1.2">
<!--
isIE = document.all;
isNN =! document.all&&document.getElementById;
isN4 = document.layers;
isActive = false;

function MoveInit(e){

  topOne = isIE ? "BODY" : "HTML";

  whichOne = isIE 
      ? document.all.FloatingLayer 
      : document.getElementById("FloatingLayer");  

  ActiveOne = isIE 
      ? event.srcElement 
      : e.target;  

  while (ActiveOne.id!="titleBar"&&ActiveOne.tagName!=topOne){
    ActiveOne = isIE ? ActiveOne.parentElement : ActiveOne.parentNode;
  }  

  if (ActiveOne.id=="titleBar"){
    offsetx = isIE ? event.clientX : e.clientX;
    offsety = isIE ? event.clientY : e.clientY;
    nowX = parseInt(whichOne.style.left);
    nowY = parseInt(whichOne.style.top);
    MoveEnabled = true;
    document.onmousemove = Move;
  }
}

function Move(e){

  if (!MoveEnabled) return;

  whichOne.style.left=isIE 
      ? nowX+event.clientX-offsetx 
      : nowX+e.clientX-offsetx; 

  whichOne.style.top=isIE 
      ? nowY+event.clientY-offsety 
      : nowY+e.clientY-offsety;

  return false;  
}

function MoveN4(whatOne){

    if (!isN4) return;

    N4 = eval(whatOne);
    N4.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
    N4.onmousedown = function(e){
        N4.captureEvents(Event.MOUSEMOVE);
        N4x=e.x;
        N4y=e.y;
    }

    N4.onmousemove = function(e){

    if (isActive){
      N4.moveBy(e.x-N4x,e.y-N4y);
      return false;
    }
  }

  N4.onmouseup = function(){
    N4.releaseEvents(Event.MOUSEMOVE);
  }
}

function ToggleFloatingLayer(DivID, iState) // 1 visible, 0 hidden
{
    if(document.layers)    //NN4+
    {
       document.layers[DivID].visibility = iState ? "show" : "hide";
    }
    else if(document.getElementById)      //gecko(NN6) + IE 5+
    {
        var obj = document.getElementById(DivID);
        obj.style.visibility = iState ? "visible" : "hidden";
    }
    else if(document.all)   // IE 4
    {
        document.all[DivID].style.visibility = iState ? "visible" : "hidden";
    }
}

document.onmousedown = MoveInit;
document.onmouseup = Function("MoveEnabled=false");
// -->
</script>



<!-- Start Floating Layer -->
<div id="FloatingLayer"     style="position:absolute;width:250px;left:100px;top:100px;visibility:visible; border:solid     1px #FF6600;">
    <div id="titleBar" style="cursor:move; width:100%; position:relative; border-    bottom:solid 1px #FF6600; background-color:#FF9933;">
        <div id="title" style="margin-right:30px; padding-left:3px;">
            <font face="Arial" color="#333333">Layer Title</font>
        </div>
        <div id="closeX" style="cursor:hand; position:absolute; right:5px; top:0px;">
            <a href="#" onClick="ToggleFloatingLayer('FloatingLayer',0);return false"      style="text-decoration:none"><font color="#333333" size="2" face="arial">X</font></a>
        </div>
    </div>
    <div id="floatingContent" style="padding:3px; background-color:#CCCCCC;     color:#333333;">
        <!-- place your HTML content here-->
        Put text, tables or any other HTML contents here, as you would put
        in any other HTML page.
        ..... and more.

        <!-- End of content area -->
    </div>
</div>
<!-- End Floating layer -->

<!-- To Show The Layer -->
<a href="javascript:ToggleFloatingLayer('FloatingLayer',1);">Show</a>
<input type="button" onClick="ToggleFloatingLayer('FloatingLayer',1);" value="Show     Layer">

<!-- To Hide The Layer -->
<a href="javascript:ToggleFloatingLayer('FloatingLayer',0);">Hide</a>
<input type="button" onClick="ToggleFloatingLayer('FloatingLayer',0);" value="Hide     Layer">

编辑：我想显示嵌入在浮动框架中的SWF文件。如果有人有任何替代方法来创建浮动框架，就像现在用于查看照片的Facebook显示那样，指向正确的方向会非常有帮助，谢谢。

Answer 1

我认为您的问题与z-index有关。

尝试将此css样式添加到浮动框架中：

z-index: 99999;

Answer 2

它是z-index或Flash等嵌入对象的问题。

您可以尝试为浮动框架使用更高的z-index值，以使其显示在其他元素的顶部。另外看看其他元素的z-index ......它们也可能有很高的z-index。

如果问题出在Flash对象上，请在embed / object标记中尝试：

<param name="wmode" value="opaque" />

正如此博文所述：Flash and the z-index problem, solved

浮动框架被其他元素重叠

2 个答案: