使用javascript顯示一種彈出窗口

單擊鏈接時我有一個HTML頁面&我試圖使一個彈出式元素（僅顯示在鏈接上的div框）出現在單擊的鏈接上方。我使用javascript來做到這一點，但我的問題是彈出式元素位於鏈接下方時，它應該在鏈接上方。使用javascript顯示一種彈出窗口

你知道我在做錯嗎&我該如何解決？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" --> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title></title> 

    <style type="text/css" media="all"> 
     <!-- 

     html, body, div, form, fieldset, legend, label, img { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: center; } h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; } 

     body { padding: 20%; background-color: green; } 

     .container { background-color: white; } 
     .newEle { width: 100px; height: 100px; background-color: red; } 

     --> 
    </style> 
    <script type="text/javascript"> 

     function getOffset(el) 
     {  
      var _x = 0; 
      var _y = 0; 

      while(el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) 
      { 
       _x += el.offsetLeft - el.scrollLeft; 
       _y += el.offsetTop - el.scrollTop; 
       el = el.parentNode; 
      }  

      return { top: _y, left: _x }; 
     } 

     function onClick(n, ele) 
     { 
      // Should display a popup box just above the HTML element called "ele" 
      // but what actually happens is that the box is displayed below the element 
      // called "ele" 

      var infoBox = document.createElement("div"); 

      infoBox.style.zIndex   = "5"; 
      //infoBox.offsetRight   = ele.offsetRight; 
      //infoBox.offsetBottom   = parseInt(ele.offsetBottom, 10) - 200 + "px"; 
      infoBox.style.x      = getOffset(ele).left + "px"; 
      infoBox.style.y      = getOffset(ele).top - 200 + "px"; 
      infoBox.style.width   = "200px"; 
      infoBox.style.height   = "200px"; 
      infoBox.style.backgroundColor = "blue"; 
      infoBox.innerHTML    = "Hello"; 

      document.body.appendChild(infoBox); 
     } 

    </script> 
</head> 

<body> 

    <div class="container"> 
     <a class="newEle" onclick="onClick(1,this)">Create New Element</a> 
    </div> 

</body> 
</html>

來源

2011-03-31 Mack

這是一個不工作的演示：http://jsfiddle.net/BCFkR/1/。 – Blender 2011-04-01 00:13:35

@Blender，恩，不知道你的意思？就像我說的那樣創建了新的div（popup元素），但它的位置不正確，它應該在鏈接之上，而不是在 – Mack 2011-04-01 00:23:50

之下我做的演示程序不能識別你的'onclick ='處理程序，它是爲什麼它壞了。太懶了修復... – Blender 2011-04-01 01:04:08

將此添加到您的CSS。

.container, .newEle {display: block; float: left;}

然後確定您的元素的位置。

來源

2011-04-01 01:34:30 PHP

（除了卡爾·格里菲斯後拿上這個一看）

檢查你的代碼，爲什麼它低於你的鏈接的原因是：

你附加你的股利後的新元素。
你說你有x和y的風格。但它並不適用於這一要素。（使用Firebug for FF或在Chrome中使用開發人員工具）
假設您成功地在新元素上添加位置樣式。您的下一個問題是，它不會在頁面上顯示。我的意思是，如果您將頂部位置設置爲-200px，它將相對將定位到您的身體而不是鏈接中。

可能的修正：

而不是使用document.body.appendChild(infoBox); 添加ID到您的div像id="container"的。然後用這個替換你的append。

var parentContainer = document.getElementById('container'); 
parentContainer.insertBefore(infoBox,parentContainer.firstChild);

我不是很肯定你infoBox.style.x而是可以例如使用infoBox.style.left = "0px;"和infoBox.style.top = "-200px"則必須使用定位相對/絕對
如果按照第二個選項，您必須正確設置div的CSS樣式。特別是這個body { padding: 20%; background-color: #CCCCCC; }如果你發現很難理解我的解釋。這裏有一個示例代碼（jsfiddle），它不像你想要的那麼完美。但是，您可以根據需要使用增強功能。

來源

2011-04-01 03:09:22 ace

我有一個組件，它可能使這一簡單 - 它不是完整的框架是，但它在是相當不錯它做什麼：

http://depressedpress.com/javascript-extensions/dp_panelmanager/

它基本上創建了「面板「超出了HTML元素（現有的或生成的）並提供了使用它們的方法。位置，大小，不透明度，簡單的動畫，碰撞檢測，軸承等。它肯定有漏洞，但它派上用場。

其中一個例子是一個簡單的「popup definitions」，應該很容易修改以適應您的需求。

基本上，你爲你的彈出窗口創建面板，並將你的點擊目標變成面板（這個例子展示了你如何用最少的代碼來做到這一點）。那麼你的onClick事件處理程序可能是這樣的：你不是太離譜

// Set the Popup panel to the same position as the clicked element. 
PopPanel.setPosition(this.getPosition()); 
    // Shift the position of the popup panel up 210 pixels 
PopPanel.shiftPosition([-210, 0]); 
    // Show the panel 
PopPanel.setDisplay("show"); 
    // Fade the panel in (Animate opacity) 
PopPanel.setOpacity(100, 0 , 200);

當然 - 並且已經給出可能解決當前的問題建議。

來源

2011-04-01 03:38:06

使用javascript顯示一種彈出窗口

回答

相關問題