下拉输入字段答案

【问题标题】：Drop-down input field下拉输入字段
【发布时间】：2012-04-28 17:19:33
【问题描述】：

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

【问题讨论】：

【解决方案1】：

这可以用 JavaScript 完成吗？

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

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

【讨论】：

【解决方案2】：

这有点复杂。

HTML 和默认样式

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

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

现在您可以使用 position-property 和其他东西来设置此框的样式：

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

现在显示在其余内容的上方。

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

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

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

CSS：

.modal {
  ...
  display: none;
}

.modal.shown {
  display: block;
}

JS：

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

我在my page 做了类似的事情。确保选中搜索框。它的代码是on GitHub。

【讨论】：