2

Attachment

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.

4

3 回答 3

3

鉴于您的信息位于 HTML 元素中，如下所示：

 <div class="info-box">
      Lorem ipsum dolor sit amet, consectetur adipiscit elit
      Cras in.
 </div>

你的 CSS 有这样的规则：

 .info-box { display: none; }

然后您的 jQuery 代码将如下所示：

 jQuery(document).ready(function($){
      $('.help').on('click', function(){
            $('.info-box').show();
      })
 });

如果我看过实际的 HTML，我可以给你一个更具体的答案；可能包括右上角的关闭按钮（您将使用该.hide()方法实现）和一个简单的系统来找出您需要显示的信息框。

在那之前，这应该会让你走上正轨。

编辑

鉴于您的 HTML，我建议使用以下解决方案：

将所有帮助元素包装<div> 在表格单元格内，如下所示：

<div class="help">
    <div class="info-box">
         <a href="#" class="close-button">&times;</a>
         Lorem ipsum dolor sit amet, consectetur adipiscit elit
         Cras in.
    </div>
    <a class='help-button' href='#' title="Click to know more">[?]</a>
</div>

您将需要的最小 CSS 如下所示：

.help {
    display:  inline-block;
    position: relative;
}

.info-box {
    width:    150px;
    position: absolute;
    right:    -170px;
}

至于 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();
  });
});

我在这里为您制作了一个样式更好的示例：

Working example

于 2013-07-26T02:50:45.160 回答
2

我建议你为此使用醉酒

于 2013-07-26T02:49:31.890 回答
2

我认为您的要求非常简单，以至于我不会使用框架来解决它。只需在框旁边放置一个隐藏元素并在点击时显示它

<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();
    });
于 2013-07-26T02:49:43.150 回答