在按鈕附近顯示浮動div

Question

我試圖在單擊按鈕時在按鈕附近顯示一個浮動div，並在單擊其中的“關閉”范圍時隱藏div。 這是我的代碼：

    <style>
    #noteDiv {display:none; position: absolute;}
    </style> 

    <script>
    function showNote(e) {

      var x = 0, y = 0;
      if (!e) e = window.event;
      if (e.pageX || e.pageY) {
        x = e.pageX;
        y = e.pageY;
      }
      else if (e.clientX || e.clientY) {
        x = e.clientX + document.body.scrollLeft
          + document.documentElement.scrollLeft;
        y = e.clientY + document.body.scrollTop
          + document.documentElement.scrollTop;
      }
    var noteDiv = document.getElementById("noteDiv");
      noteDiv.style.display = "block";
      noteDiv.style.left = (x+20)+"px";
      noteDiv.style.top = (y)+"px";
    }

    function hideNote() {
      document.getElementById("noteDiv").style.display = "none";
    }
    </script>

 <div id='noteDiv'>
 <div style="margin: 5px; float: right; font-size: smaller"><span  onclick="hideNote()">Close</span></div><br clear="all">

<div>Note Content</div>
 </div>

    <?php
    echo "<button type ='button' onClick = 'showNote();'>Note</button>";
    ?>

它確實隱藏了div，但是當我單擊按鈕“ Note”時，noteDiv不會顯示。

怎么了？

謝謝！ 邁克爾·拉斯洛（Michael Laszlo）。 我想我發現了問題，盡管我不知道如何處理。

我相信這是javascript peice，因為如果我注釋掉這一部分：

if (e.pageX || e.pageY) {
  x = e.pageX;
  y = e.pageY;
 }
  else if (e.clientX || e.clientY) {
  x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
  y = e.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
  }

該按鈕效果很好（盡管由於x和y為0，所以它的位置在屏幕的左上角）。

我有想念嗎？

對於Sunil的建議，我現在刪除了類部分，並且將onClick更改為onclick，現在回聲很好，謝謝Sunil！

再次感謝Michael Laszlo！ 是的，你是對的！ 我需要給按鈕一個ID或e不能傳遞給函數！ 現在我的代碼也可以使用！

我的頁面上有很多這樣的按鈕，我需要生成一個var來驗證它們，然后我認為它應該可以工作。 如果有任何問題，那應該是關於PHP的另一個問題，哈哈。

非常感謝Michael Laszlo和Sunil，關於為按鈕設置ID並從瀏覽器檢查代碼的建議對您有很大幫助！ 我從你們那里學到了有價值的東西！

Answer 1

問題是調用showNote()時事件e是不確定的。 為了確保將事件傳遞給showNote ，請為按鈕提供一個ID，並在窗口加載時附加單擊處理程序。

例如，您可以這樣定義按鈕：

<button id="noteButton" type="button">Note</button>

然后將其添加到您的JavaScript：

window.onload = function () {
  document.getElementById('noteButton').onclick = showNote;
};

下面的代碼段演示了這種方法。

 window.onload = function () { document.getElementById('noteButton').onclick = showNote; }; function showNote(e) { var x = 0, y = 0; if (!e) e = window.event; if (e.pageX || e.pageY) { x = e.pageX; y = e.pageY; } else if (e.clientX || e.clientY) { x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } var noteDiv = document.getElementById("noteDiv"); noteDiv.style.display = "block"; noteDiv.style.left = (x+20)+"px"; noteDiv.style.top = (y)+"px"; } function hideNote() { document.getElementById("noteDiv").style.display = "none"; } 

 #noteDiv { display:none; position: absolute; } 

 <div id='noteDiv'> <div style="margin: 5px; float: right; font-size: smaller"> <span onclick="hideNote()">Close</span> </div> <br clear="all"> <div>Note Content</div> </div> <button id="noteButton" type="button">Note</button> 

Answer 2

它應該可以工作，但請記住，您需要單擊屏幕上的特定區域，而不是單擊任意區域以關閉筆記。 您可以通過為邊框設置樣式來使該區域對用戶顯而易見。

您可以在此處看到一個演示它可以正常工作的演示： https : //jsfiddle.net/g43j5jdp/1/

我在封閉區域中添加了邊框，如下面的代碼所示。

<div style="margin: 5px; float: right; font-size: smaller;
border:1px solid red;"><span onclick="hideNote()">Close</span>

注意解決您問題的最快方法是使用瀏覽器的開發人員工具。 否則，您可能最終會花太多時間在此上。

還請閱讀這篇stackoverflow帖子，它可能會幫助您擺脫呈現在html中的php代碼$ classStr： 為什么顯示我的PHP源代碼？ 您的問題似乎與php配置有關。