如何在按钮附近显示div

Question

I have a page which has a lot of buttons. 我的页面上有很多按钮。 What I need to do is to show a div near the button. 我需要做的是在按钮旁边显示一个div。 I tried this: 我尝试了这个：

<style>
#noteDiv {display:none; position: absolute; background-color: white; border: 1px solid blue;}
</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;
                 }


document.getElementById("noteDiv").style.display = "block";
document.getElementById("noteDiv").style.left = (x)+"px";
document.getElementById("noteDiv").style.top = (y-350)+"px";


                }

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

<body>    
<?php
 echo "<button type ='button' id = 'noteButton'>Note</button>"; 
 echo "<script>document.getElementById('noteButton').onclick = showNote;\n";
 echo "</script>";
 ?>
</body>
  <div id='noteDiv'  >
  <div ><span onclick="hideNote()">Close</span></div>
  <br clear="all">
  <div id='noteContent' style='max-height: 30em'></div>
  </div>

It does work. 确实有效。 But sometimes the page will show one more div on top of the page, like a warning message, and thus the noteDiv's position will be far from the buttons to which it should attach. 但是有时页面会在页面顶部显示一个div，就像一条警告消息一样，因此noteDiv的位置将远离其应附加的按钮。

My thinking is to get the position of the buttons, and send the x, y values of the button position to the function showNote(), from there show the noteDiv. 我的想法是获取按钮的位置，并将按钮位置的x，y值发送到函数showNote（），从那里显示noteDiv。 I don't know if this idea is reasonable and how to get and transfer the current clicked button's position to javascript? 我不知道这个主意是否合理，以及如何获取当前点击按钮的位置并将其转换为javascript？

Any suggestions and hints will be appreciated! 任何建议和提示将不胜感激！

Answer 1

All the HTML like <button> <div> <span> <ul><li> <table> etc MUST be inside the <body> </body> tag: 所有HTML，例如<button> <div> <span> <ul><li> <table>等，都必须位于<body> </body>标记内：

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <!-- you can include css and javascript here -->
    <!-- but best place to include javascript ist at the bottom -->
    <!-- see last comment -->
</head>
<body>

    <?php echo '<button type="button" id="noteButton">Note</button>';   ?>


    <!-- best place to include javascript or echo them with PHP what ever
     right before the closing body tag -->
</body>
</html>

You are echoing a <button> via PHP before the opening <body> tag which is wrong. 您正在通过PHP在打开<body>标记之前echoing <button> ，这是错误的。 Try use something like firebug and https://validator.w3.org/ 尝试使用萤火虫和https://validator.w3.org/之类的东西

Answer 2

From the beginning. 从一开始就。 Load javascript on top of your page is a very bad idea . 在页面顶部加载javascript是一个非常糟糕的主意 。 I'll let the tons of web articles to explain you why. 我会让大量的网络文章向您解释原因。 Just to say one reason, the js files are downloaded before the html is rendered (depending on the browser), resulting in a slower rendering of the page. 只是说一个原因，js文件是在html呈现之前下载的（取决于浏览器），从而导致页面呈现较慢。

About your approach: 关于您的方法：

Three words: separation of concerns. 三个词：关注点分离。 Positioning dom elements is not what belongs to javascript (except some very rare occasions). 定位dom元素不是属于javascript的内容（某些极少数情况除外）。 Styling the DOM , which comprehends positioning of the objects , belongs to the Cascading Style Sheet, also known as CSS . 包含对象位置的DOM样式属于“层叠样式表”，也称为CSS 。

So if something is not rendered in the right way, don't try to fix it with javascript. 因此，如果未正确显示某些内容，请勿尝试使用javascript进行修复。 It will only drives you to enormous headaches. 它只会使您头痛不已。

For a better answer, please provide a code that can show us the error. 为了获得更好的答案，请提供可以向我们显示错误的代码。

UPDATE UPDATE

Here is a working example (probably not optimised) of what you are maybe trying to achieve. 这是您可能想要实现的工作示例（可能未优化）。 Please, please, please, please... read a book about html, css and js. 拜托，拜托，拜托，拜托，...阅读一本关于html，css和js的书。 It's totally worth it. 完全值得。 I didn't use php , didn't need it. 我没有使用php ，不需要它。

Just for the records, the general structure of an html page I personally use is like this one: 仅作记录，我个人使用的html页面的一般结构是这样的：

html
    head
        title
        meta
        styles link
        styles sections
        js **LIBRARIES** which need to be loaded on **TOP**
        google analytics
    body
        html content
        js **LIBRARIES** which need to be loaded on **BOTTOM**
        js scripts

And for your sanity, and of the people who helps you, indent correctly (it's also a sign of respect to the people who are reading your code). 为了您的理智和为您提供帮助的人们正确地缩进 （这也是对正在阅读您的代码的人们的尊重的标志）。

Here is the code with the snippet: 这是带有代码段的代码：

 function toggleNote(id) { var noteParent = document.getElementById(id); var note = noteParent.querySelector('.note'); var display = "none"; if (note.style.display == "none" || note.style.display == "" ) { display = "block"; } note.style.display = display; }

 .note { display: none; position: relative; background-color: white; border: 1px solid blue; } .noteContent { max-height: 30em }

 <body> <div class="buttonContainer" id="note0"> <button id='noteButton' onclick="toggleNote('note0')">Note</button> <div class='note'> <div> <button onclick="toggleNote('note0')">Close</button> </div> <br clear="all"> <div class='noteContent'>It's something!</div> </div> </div> </body>

如何在按钮附近显示div

问题描述

2 个解决方案

解决方案1
2 2015-08-21 20:52:29

解决方案2
2 2015-08-21 20:57:22

如何在按钮附近显示div

问题描述

2 个解决方案

解决方案1 2 2015-08-21 20:52:29

解决方案2 2 2015-08-21 20:57:22

解决方案1
2 2015-08-21 20:52:29

解决方案2
2 2015-08-21 20:57:22