下拉输入字段

Question

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

Answer 1

可以用JavaScript完成吗？

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

这是一个使用jQuery的简单示例： http ： //jsfiddle.net/Byujd/1/

Answer 2

这有点复杂。

HTML和默认样式

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

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

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

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

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

一些jQuery-Goodness

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

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

一个更好的方法

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

CSS：

.modal {
  ...
  display: none;
}

.modal.shown {
  display: block;
}

JS：

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

Moar

我在我的页面上做了一些非常相似的事情。 务必检查搜索框。 它的代码在GitHub上 。