Question

首次点击答案文本区域时，会弹出一个消息框

Your Answer
Thanks for contributing an answer to Stack Overflow!

Please make sure you answer the question; this is a Q&A site, not a discussion forum.

Provide details and share your research. Avoid statements based solely on opinion; 
only make statements you can back up with an appropriate reference, or 
personal experiences.

enter image description here

我正在努力在我自己的系统中实现这一点。我已检查jQuery slideUp function，但它会将文本消息框向下向上滑动。

有人知道如何实施吗？

我假设它使用JavaScript动画。

Answer 1

我不确定你想要什么，是this吗？我想你想使用.slideToggle（）

HTML

<textarea></textarea>
<div class="msg">
     谢谢你!!
</div>

的jQuery

$(".msg").slideToggle();
    $("textarea").focus(function(){
        $(".msg").slideToggle();
    });
    $("textarea").blur(function(){
        $(".msg").slideToggle();
    });

您想要什么时候出现？

Answer 2

假设您的textarea是这样的

<textarea id='answer'></textarea>

所以你可以使用

$('textarea#answer').bind('click', function() {alert('Thanks')})

Answer 3

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style type="text/css">
      .div1 {
      width:400px;
      height:100px;
      border: 1px solid #777777;
      }
      .div2 {
      width:400px;
      height:100px;
      border: 1px solid #777777;
      overflow:hidden;
      }
      .help {
      background-color:#fefae2;
      border: 1px solid #f3eed5;
      width:400px;
      height:100px;
      margin-top:100px;
      }
      .info-ok{
      font-size: 13px;
      color:#1087a4;
      float:right;
      margin-top:5px;
      margin-right:5px;
      }
      .info-head{
      font-size: 15px;
      font-weight: bold;
      margin-top:15px;
      margin-right:5px;
      }
    </style>
  </head>
  <script type="text/javascript">
    function popdown(){
    $(".help").animate({
    marginTop:"100px",
    }, 1000 );
    }
    function popup(){
    $(".help").animate({
    marginTop:"0px",
    }, 1000 );
    }
  </script>
  <body>
    <div class="div1">a</div>
    <div class="div2">
      <div class="help">
    <a class="info-ok" onclick="popdown()">ok</a>
    <p class="info-head">您的答案</p>
    <p>感谢您对StackPointer做的贡献</p>
    <p>请确保您回答这个问题,这是一个问答网站，而不是一个论坛</p>
    <p></p>
      </div>
    </div>
    <div class="div3">c</div>
    <textarea onclick="popup()"></textarea>
  </body>
</html>

如何制作一个javascript覆盖的幻灯片？

3 个答案: