javascript - 如何动态显示 float 文本区域？

Question

我有这样一个博客站点:

基本上，我想要的是

If user clicks search, then a floating semi-transparent textarea window will be displayed in the rectangle area (shown in the picture, that red orange rectangle). If user click search again, the textarea is off.

我该怎么做？

到目前为止我得到的是:

在我的页面中

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

在我的脚本中

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

}

我知道我必须在空括号上方填充一些东西，以打开或关闭文本区域。

我是 html5 初学者。我该怎么做？

Answer 1

假设您提供的代码使用的是 jQuery，那么您可以使用以下命令切换文本面板状态:

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

.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;
}

<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>

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

CSS3 可用于为文本区域添加透明度，它简单明了且得到广泛支持，更多信息可在此处查看 - http://css-tricks.com/almanac/properties/o/opacity/ .

也可以使用 CSS 定位文本框，方法是声明绝对位置，然后为其赋予顶部和左侧值以使其偏离父容器。