模拟可点击的输入表单

Question

我正在尝试模拟用户点击蓝色条时弹出的可点击输入表单，如上所示。我对前端开发的经验是有限的，所以我不知道该怎么称呼这些元素，但是假设它们是包含在框中的可点击的输入表单，这可以导致其他可点击的表单，如日期选择器如图所示。

如何在Javascript中执行此操作？最好使用AngularJS，因为我正在使用的应用程序使用它。我不介意使用JQuery。

我不是在寻找详细的逐步说明（我不介意），但提示让我开始克隆这些功能。

感谢。

Answer 1

您看到的弹出窗口将是HTML元素，可能是<div>个。该页面将使用JavaScript在条形图上创建事件侦听器，以便在单击/鼠标悬停时隐藏/显示它们。 “弹出窗口”实际上与页面中的任何其他元素一样，但使用较高的Z-index并使用CSS positioning (most likely absolute)使其显示为弹出式窗口。看起来他们正在使用CSS arrow trick来绘制语音气泡指针，尽管它也可以通过图像来完成。

如果我要发展这个，我会把它分解成这样的阶段：

1. 将我的弹出窗口放入我的HTML页面，并确保它不会出现在任何地方。
2. 当我想要它时显示/隐藏（当点击蓝色条时，或者当用户将鼠标移入蓝色条中时）。
3. 让它显示/隐藏我想要的地方（靠近蓝条）
4. 让它看起来更好（处理CSS并使指针正常工作）
5. 将该作品转换为二级弹出窗口。第二级将是完全相同的技术，但是CSS类可能会有所不同，因此第二个气泡看起来不同并且指针位于不同的位置。

当然，您不必自己开发此功能。您还可以使用a number of jQuery plugins，以及Bootstrap's popover component。