[英]Why can't I get bootstrap popover to work?
我通过创建一个仅包含必需的引导程序模板，弹出代码和底部的“弹出关闭”脚本的文件来隔离问题，从而使任何人都不必阅读我的整个网页即可查看我所指的内容。 弹出窗口应该会在单击时创建一个带有信息的小窗口。 该关闭脚本应该使它在单击时消失。 而是单击该按钮时没有任何反应。 有人可以看看吗？ 我完全不遵循指示，所以我不知道问题可能是什么。 引导CSS和所需的jQuery /插件脚本已正确放置在文档中。 对于任何人对我的弹出式窗口无法正常运行的见解，我将不胜感激。
谢谢！！
<!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>
您的jquery $('.popover-dismiss')正在搜索具有class popover-dismiss元素，但是您没有任何这样的元素，这就是为什么什么都没有发生的原因。 使用类似$('[data-toggle="popover"]') 。
注意：我将弹出窗口放在底部，因为顶部没有空间，但是您可以轻松更改它。
编辑：现在可以使用。 这是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>
为什么我不能让引导弹出窗口在我希望其工作的桌子上工作？
[英]Why can't I make the bootstrap popover work at the table where I want it to work?
Laravel 6-Bootstrap 为什么 Popover 在没有错误的情况下不起作用？
[英]Laravel 6-Bootstrap Why Popover doesn't work while there is no error?
为什么Twitter Bootstrap popover不能与SVG元素一起使用？
[英]Why doesn't Twitter Bootstrap popover work with SVG elements?
如何获取JavaScript以在Bootstrap弹出窗口中执行？
[英]How can I get JavaScript to execute inside a Bootstrap popover?
我可以获得 twitter bootstrap popover 的当前状态吗？
[英]Can I get the current state of a twitter bootstrap popover?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.