javascript 如何在小框中显示信息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17872030/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display information in small box
提问by Sushan
I have added [?]in right side of the form to show information about respective fields. I want to show information in small box after clicking [?]. How can i do that?
我在表单右侧添加了[?]以显示有关各个字段的信息。单击[?]后，我想在小框中显示信息。我怎样才能做到这一点？
Thanks in advance.
提前致谢。
回答by TGH
I think your requirements are so simple that I wouldn't use a framework to solve it. Just put a hidden element next to the box and show it on click
我认为您的要求太简单了，我不会使用框架来解决它。只需在框旁边放置一个隐藏元素并在单击时显示它
<div style="display:none" id="helpText" class="helptTextBox">
<div class="closeIcon">X</div>
</div>
$('#questionBox').click(
function(){
$("#helpText").show();
});
$('.closeIcon').click(
function(){
$(this).closest(".helptTextBox").hide();
});
回答by Sunyatasattva
Given that your information is in an HTML element like so:
鉴于您的信息位于 HTML 元素中，如下所示：
<div class="info-box">
Lorem ipsum dolor sit amet, consectetur adipiscit elit
Cras in.
</div>
And your CSS has a rule like:
你的 CSS 有这样的规则：
.info-box { display: none; }
Then your jQuery code will look like this:
然后你的 jQuery 代码将如下所示：
jQuery(document).ready(function($){
$('.help').on('click', function(){
$('.info-box').show();
})
});
If I had seen the actual HTML, I could give you a more specific answer; perhaps including a close button in the upper-right (which you would implement with the .hide()method) and a simple system to find out which info-box you need to show.
如果我看过实际的 HTML，我可以给你一个更具体的答案；也许包括右上角的关闭按钮（您将使用该.hide()方法实现）和一个简单的系统来找出您需要显示的信息框。
Until then, this should get you on the right track.
在那之前，这应该会让你走上正轨。
Edit
编辑
Given your HTML, I would suggest this solution:
鉴于您的 HTML，我建议使用此解决方案：
Wrap all your help elements inside a <div>?inside your table-cell, like so:
将所有帮助元素包裹<div>在表格单元格内的? 中，如下所示：
<div class="help">
<div class="info-box">
<a href="#" class="close-button">×</a>
Lorem ipsum dolor sit amet, consectetur adipiscit elit
Cras in.
</div>
<a class='help-button' href='#' title="Click to know more">[?]</a>
</div>
The minimal CSS you will need, will look like this:
您需要的最小 CSS 如下所示：
.help {
display: inline-block;
position: relative;
}
.info-box {
width: 150px;
position: absolute;
right: -170px;
}
As for the jQuery code, it's going to be very simple:
至于 jQuery 代码，它将非常简单：
jQuery(document).ready(function($){
$('.help-button').on('click', function(e){
e.preventDefault();
$(this).siblings('.info-box').show();
});
$('.close-button').on('click', function(e){
e.preventDefault();
$(this).parents('.info-box').hide();
});
});
I have made a better styled example for your, here:
我在这里为您制作了一个更好的样式示例：
