在按钮中显示浮动 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 不显示。

出了什么问题？

谢谢！迈克尔·拉兹洛。我想我发现了问题，但我不知道如何处理。

我相信这是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的建议，我暂时把class部分去掉，把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;
};

下面的sn-p演示了这种方法。

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

它应该可以工作，但请记住，您需要单击屏幕上的特定区域，而不仅仅是单击任何位置来关闭笔记。您可以通过设置带边框的 span 样式使该区域对用户显而易见。

你可以在这里看到一个演示来证明它可以工作：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：Why is my PHP source code showing? 您的问题似乎与 php 配置有关。