Javascript 指向按钮CSS的弹出窗口
我的表格里有一个按钮。当我按下按钮时，我想执行CSS脚本。CSS代码显示一个弹出框 目标 目标是当我点击按钮时，它会触发我的CSS弹出窗口，它将指向我的按钮 编辑 我设法让弹出窗口显示onClick，但现在弹出框离按钮太远了Javascript 指向按钮CSS的弹出窗口,javascript,html,css,web,Javascript,Html,Css,Web,我的表格里有一个按钮。当我按下按钮时，我想执行CSS脚本。CSS代码显示一个弹出框 目标 目标是当我点击按钮时，它会触发我的CSS弹出窗口，它将指向我的按钮 编辑 我设法让弹出窗口显示onClick，但现在弹出框离按钮太远了 #myDIV{ 宽度：100%； 填充：5px0； 文本对齐：居中； 背景色：透明； 边缘顶部：8px； } 正文{背景：#26A9E1；填充：40px} #p{背景：白色；-webkit边框半径：50px； -moz边界半径：10px； 边框半径：0px；宽度：550
#myDIV{
宽度：100%；
填充：5px0；
文本对齐：居中；
背景色：透明；
边缘顶部：8px；
}
正文{背景：#26A9E1；填充：40px}
#p{背景：白色；-webkit边框半径：50px；
-moz边界半径：10px；
边框半径：0px；宽度：550px；高度：150px}
#指针{边框：实心20px透明；边框底色：#fff；位置：绝对；边距：-205px 00px 00px 10px；}
试试看
函数myFunction（）{
var x=document.getElementById（'myDIV'）；
如果（x.style.display=='none'）{
x、 style.display='block'；
}否则{
x、 style.display='none'；
}
}
我认为我能够使用纯css实现您想要的，而不使用javascript我制作了一个JSFIDLE： 编辑：下面是一个使用javascript的版本： 这是没有javascript的版本 HTML:
在CSS之外，你不能太多地控制网页交互的逻辑——这就是为什么javascript是用于。我在上面看到了您的答案，但我不建议您继续尝试这样做，因为很难确定“焦点”是什么。除了CSS之外，您无法太多地控制网页交互的逻辑-这就是为什么javascript适用的原因。我在上面看到了你的答案，但我不建议你继续这样做，因为很难确定“焦点”是什么。你不能用CSS来做这件事，除非你是在追求鼠标悬停效果。如果你想使用点击来显示/隐藏弹出窗口，你需要JS。嗨，我试着添加JS，但我也没有成功@amflareThen显示该代码并在那里寻求帮助。只有CSS才能实现这一点，除非您在追求鼠标悬停效果。如果你想使用点击来显示/隐藏弹出窗口，你需要JS。嗨，我试着添加JS，但我也没有成功@amflareThen显示该代码并在那里寻求帮助。感谢您使用带/不带JavaScript的两个版本。感谢您使用带/不带JavaScript的两个版本。
<body>
<button id="p" type="button">Click Me!
<div class="container">
<p></p>
<div id="pointer"></div>
</div>
</button>
</body>
body {background:#26A9E1;padding:40px; position: relative;}
p {background:white; -webkit-border-radius: 50px;
-moz-border-radius: 10px;
border-radius: 0px; width:550px; height:150px}
#pointer{border:solid 20px transparent;border-bottom-color:#fff;position:absolute;margin:-205px 00px 00px 10px;}
.container {
display: none;
position: absolute;
top: 25px;
}
#p {
position: relative;
}
#p:focus .container {
display: block;
}