javascript - 下拉输入字段

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 和其他东西来设置此框的样式：

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

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

一些 jQuery-Goodness

该按钮只需要一个监听器。使用 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');
});

摩尔

我在我的页面上做了一些非常相似的事情。确保选中搜索框。它的代码在 GitHub 上。