[英]Drop-down input field
I would like to add a similar drop-down input field (picture below), to my website. 我想在我的网站上添加一个类似的下拉输入字段(如下图所示)。 I want it to appear when a link/image/button is clicked on.
我希望它在单击链接/图像/按钮时出现。 Can this be done with JavaScript?
可以用JavaScript完成吗? Also, I don't want it to affect the flow of the page.
另外,我不希望它影响页面的流量。
Can this be done with JavaScript?
可以用JavaScript完成吗?
Yes. 是。 The JavaScript/CSS equivalent would be a button which (when clicked) displayed an element with
position: fixed
or position: absolute
. JavaScript / CSS等效项是一个按钮,当(单击时)显示一个元素,其
position: fixed
或position: absolute
。
Here is a simple example using jQuery: http://jsfiddle.net/Byujd/1/ 这是一个使用jQuery的简单示例: http : //jsfiddle.net/Byujd/1/
This is a bit complex. 这有点复杂。
You need an element which is displayed above the content: 您需要一个显示在内容上方的元素:
<div class="modal">
<!-- Some content like textarea and stuff -->
</div>
Now you can style this box with the position
-property and other things: 现在,您可以使用
position
-property和其他内容position
此框的样式:
.modal {
position: absolute;
z-index: 999;
}
This now displays above the rest of the content. 现在显示在其余内容之上。
The button just needs a listener. 按钮只需要一个监听器。 With jQuery this looks something like this:
使用jQuery,它看起来像这样:
$('.the-buttons-class').click( function (e) {
e.preventDefault();
$('.modal').toggle();
});
Instead of toggling the state of the modal with jQuery's toggle()
-function you could toggle a class on it and manipulate the state accordingly: 而不是使用jQuery的
toggle()
函数toggle()
模态的状态,您可以在其上切换一个类并相应地操作状态:
CSS: CSS:
.modal {
...
display: none;
}
.modal.shown {
display: block;
}
JS: JS:
$('.the-buttons-class').click( function (e) {
e.preventDefault();
$('.modal').toggleClass('shown');
});
I've done something pretty similar at my page . 我在我的页面上做了一些非常相似的事情。 Make sure to check the search box.
务必检查搜索框。 The code for it is on GitHub .
它的代码在GitHub上 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.