在按钮附近显示浮动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配置有关。