为什么我不能让引导弹出窗口起作用？
[英]Why can't I get bootstrap popover to work?
问题描述
I've isolated the problem by creating a file that only has the required bootstrap template, popover code, and the "popover dismiss" script at the bottom so that nobody has to read my entire webpage to see what I'm referring to. 
我通过创建一个仅包含必需的引导程序模板，弹出代码和底部的“弹出关闭”脚本的文件来隔离问题，从而使任何人都不必阅读我的整个网页即可查看我所指的内容。 The popover is supposed to create a little window with information in it when clicked. 弹出窗口应该会在单击时创建一个带有信息的小窗口。 The dismiss script is supposed to make it disappear upon clicking. 该关闭脚本应该使它在单击时消失。 Instead, nothing happens when the button is clicked. 而是单击该按钮时没有任何反应。 Could someone take a look at it? 有人可以看看吗？ I have no clue what the issue could be, as I followed instructions exactly. 我完全不遵循指示，所以我不知道问题可能是什么。 The bootstrap css and the required jQuery/plugin scripts are properly placed within the document. 引导CSS和所需的jQuery /插件脚本已正确放置在文档中。 I'd appreciate anyone's insight on why my popover is not functioning correctly. 对于任何人对我的弹出式窗口无法正常运行的见解，我将不胜感激。
Thanks!! 谢谢！！
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on top </button> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script> $('.popover-dismiss').popover({ trigger: 'focus' }) </script> </body> </html>
1 个解决方案
解决方案1
2 2018-08-12 07:23:56
Your jquery $('.popover-dismiss') is searching for elements with class popover-dismiss but you don't have any such element, that's why nothing is happening. 您的jquery $('.popover-dismiss')正在搜索具有class popover-dismiss元素，但是您没有任何这样的元素，这就是为什么什么都没有发生的原因。 Use something like $('[data-toggle="popover"]') instead. 使用类似$('[data-toggle="popover"]') 。
Note: I have put the popover on bottom because there is no space on top but you can easily change that. 注意：我将弹出窗口放在底部，因为顶部没有空间，但是您可以轻松更改它。
Edit: It works now. 编辑：现在可以使用。 Here is codepen 这是codepen
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <button type="button" class="btn btn-secondary popover-dismiss" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on top </button> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script> $('.popover-dismiss').popover({ trigger: 'focus' }); </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.