如何使用 jquery 或 JavaScript 将元素属性与 Bootstrap Popover html 绑定？
[英]How to bind element attributes with Bootstrap Popover html using jquery or JavaScript?
问题描述
Given below is a code that contains a button.
下面给出的是包含一个按钮的代码。 On the button's click a popover is shown with hard-coded details.单击按钮时，将显示带有硬编码详细信息的弹出窗口。
Is it possible for the popover to get details from the Buttons attributes eg
data-name = "Vikas" data-content = "He is a student" data-dp = "../dp.jpg"弹出窗口是否可以从按钮属性中获取详细信息，例如data-name = "Vikas" data-content = "He is a student" data-dp = "../dp.jpg"Second issue is that the popover is closed when the user click again on the button.
第二个问题是当用户再次单击按钮时弹出窗口会关闭。 Is it possible to to stop it and instead of this can we give a close button in popover and on its click the popover should be closed.是否可以停止它，而不是这样，我们可以在弹出窗口中提供一个关闭按钮，并在单击时关闭弹出窗口。
Many thanks for any help.非常感谢您的帮助。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('[data-toggle="popover"]').popover({ placement: 'top', html: true, title: 'User Info <a href="#" class="close" data-dismiss="alert">×</a>', content: '<div class="media"><a href="#" class="pull-left"><img src="../images/avatar-tiny.jpg" class="media-object" alt="Sample Image"></a><div class="media-body"><h4 class="media-heading">Jhon Carter</h4><p>Excellent Bootstrap popover! I really love it.</p></div></div>' }); $(document).on("click", ".popover .close", function() { $(this).parents(".popover").popover('hide'); }); }); </script> <style type="text/css"> .bs-example { margin: 160px 10px 0; } .popover-title .close { position: relative; bottom: 3px; } </style> </head> <body> <div class="bs-example"> <button type="button" class="btn btn-primary" data-toggle="popover">Click Me</button> </div> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2016-03-10 06:58:46
Just an example, should help you:只是一个例子，应该可以帮助你：
- Dynamic content:动态内容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('[data-toggle="popover"]').popover({ placement: 'top', html: true, title: function() { return $(this).data('title') + '<a href="#" class="close" data-dismiss="alert">×</a>'; }, content: function() { return $(this).data('content'); } }); $(document).on("click", ".popover .close", function() { $(this).parents(".popover").popover('hide'); }); }); </script> <style type="text/css"> .bs-example { margin: 160px 10px 0; } .popover-title .close { position: relative; bottom: 3px; } </style> </head> <body> <div class="bs-example"> <button type="button" class="btn btn-primary" data-toggle="popover" data-title="Custom Title" data-content="Custom Content">Click Me</button> </div> </body> </html>
- Look at the popover
triggerparam:查看 popover trigger参数：
How popover is triggered - click |
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.