如何在浮动textarea上动态显示或关闭？

Question

我有这样一个博客网站：

基本上，我想要的是

  

如果用户点击搜索，则会在矩形区域中显示浮动的半透明textarea窗口（如图所示，该红色橙色矩形）。如果用户再次单击搜索，则textarea将关闭。

我该怎么做？

到目前为止我得到的是：

在我的页面中

<input type="radio" id="radio3" name="radios" value="search">
<label for="radio3">Search</label>

在我的剧本中

if($(this).attr("id") == "radio3"){

}

我知道我必须在空支架上面填一些东西，打开textarea或关闭。

我是html5初学者。我怎么能这样做？

Answer 1

假设您已使用jQuery提供的代码，那么您可以使用以下内容切换文本面板状态：

＆＃13;

＆＃13;

$("#radio3").on("click",function(){
  $("#textbox").toggle();
});

＆＃13;

.container {
  position: relative;
  width: 500px;
  height: 500px;
  background: black;
  color: white;
}
.textbox {
  display: none;
  position: absolute;
  top: 50px;
  left: 75px;
  background: white;
  opacity: 0.5;
  height: 300px;
  width: 300px;
  color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div class="container">
  <input type="radio" id="radio3" name="radios" value="search">
  <label for="radio3">Search</label>

  <div id="textbox" class="textbox">
    Use search to toggle this area. 
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

有关切换的更多信息 - http://api.jquery.com/toggle/

CSS3可用于为文本区域添加透明度，其直接和广泛支持，更多信息可在此处查看 - http://css-tricks.com/almanac/properties/o/opacity/。

也可以使用CSS定位文本框，同时说明绝对位置，然后给它顶部和左侧的值以使其偏离它的父容器。