下拉输入字段

Question

我想在我的网站上添加一个类似的下拉输入字段（如下图所示）。我希望它在单击链接/图像/按钮时出现。可以用JavaScript完成吗？另外，我不希望它影响页面的流程。

Answer 1

  

可以用JavaScript完成吗？

是。 JavaScript / CSS等效项是一个按钮，当（单击时）显示带有position: fixed或position: absolute的元素。

以下是使用jQuery的简单示例：http://jsfiddle.net/Byujd/1/

Answer 2

这有点复杂。

HTML＆amp;默认样式

您需要一个显示在内容上方的元素：

<div class="modal">
  <!-- Some content like textarea and stuff -->
</div>

现在，您可以使用position - 属性和其他内容设置此框的样式：

.modal {
  position: absolute;
  z-index: 999;
}

现在显示在其余内容之上。

一些jQuery-Goodness

该按钮只需要一个监听器。使用jQuery，它看起来像这样：

$('.the-buttons-class').click( function (e) {
  e.preventDefault();
  $('.modal').toggle();
});

更好的方法

不是使用jQuery的toggle() - 函数切换模态的状态，而是可以在其上切换类并相应地操作状态：

CSS：

.modal {
  ...
  display: none;
}

.modal.shown {
  display: block;
}

JS：

$('.the-buttons-class').click( function (e) {
  e.preventDefault();
  $('.modal').toggleClass('shown');
});

Moar

我在my page做了类似的事情。务必检查搜索框。 它的代码是on GitHub。