我正在使用弹出框作为输入验证过程的一部分。我有这个想法,但我不能想出如何让它工作的语法。
https://jsbin.com/sufitelodo/1/edit?html,js,output
这个JSBin是它的基础。
我不知道如何为隐藏的Bootstrap 5.2弹出窗口编写HTML,在输入A中键入数字0,在输入B中键入任意数字,在输入C中再次键入相同的数字。第一个错误应该是输入A = 0,然后将其更改为任意非零,然后第二个错误应该发生时,你尝试和提交。我想改变从警报框弹出。
第一个
所以,我希望Bootstrap能有一个更干净的弹出窗口,而不是警告,但是语法和让它们工作(即使在尝试破译文档之后)不是我这边的。然后弹出窗口打开后,它需要能够再次关闭。
我尝试了data-bs-trigger="focus"
,但这似乎没有启用关闭。
谢谢你的帮助。
***编辑-我已经更新了代码,允许只使用香草,但有一个错误,使用关闭按钮...我似乎不能处理弹出窗口。
2条答案
按热度按时间olhwl3o21#
我包括了文档中描述的所有必需资产(对于版本5.2):
https://getbootstrap.com/docs/5.2/getting-started/introduction/
并使用此处显示的确切代码片段初始化所有弹出窗口:
https://getbootstrap.com/docs/5.2/components/popovers/
在给定css选择器的情况下获取弹出窗口示例的策略:
分别显示和隐藏时您感兴趣调用的方法是:
我添加到您的逻辑中的唯一操作是在显示新的弹出窗口(如果是这样的话)之前,在单击按钮时隐藏所有弹出窗口。
然后我还添加了一个策略来处理点击,它将隐藏任何可见的弹出窗口,以防出现任何显示。Bootstrap依赖于属性
data-bs-trigger
设置为focus
而不是manual
,但这意味着弹出窗口将通过用户交互触发,而不是***手动***显式调用.show()
方法。因此,由于我们通过.show()
显示弹出窗口,因此我们注定也要实现.hide()
部分,在本例中,它由window对象上的click事件处理程序处理。第一次
pxy2qtax2#
您需要获取相应Popover的示例并显示它。
Demo