[英]How to bind element attributes with Bootstrap Popover html using jquery or JavaScript?
下面給出的是包含一個按鈕的代碼。 單擊按鈕時，將顯示帶有硬編碼詳細信息的彈出窗口。
彈出窗口是否可以從按鈕屬性中獲取詳細信息，例如data-name = "Vikas" data-content = "He is a student" data-dp = "../dp.jpg"
第二個問題是當用戶再次單擊按鈕時彈出窗口會關閉。 是否可以停止它，而不是這樣，我們可以在彈出窗口中提供一個關閉按鈕，並在單擊時關閉彈出窗口。
非常感謝您的幫助。
<!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>
只是一個例子，應該可以幫助你：
<!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>
trigger參數：彈出窗口是如何觸發的 - 單擊 | 懸停| 焦點| 手動的。 您可以傳遞多個觸發器； 用空格分隔它們。 手動不能與任何其他觸發器結合使用。
jQuery Validate，Select2和Bootstrap 3 Popover-如何將Popover綁定到Select2的父元素而不是隱藏的Select元素
[英]jQuery Validate, Select2, and Bootstrap 3 Popovers - How to Bind Popover To Select2's Parent Elements Instead of Hidden Select Element
如何模仿HTML元素並在Javascript / jQuery中為其添加屬性
[英]How to mimic an HTML element and add attributes to it in Javascript/jQuery
彈出框內容 - 彈出框內未顯示按鈕（JQuery / Javascript / HTML / Bootstrap）
[英]Popover content - Button is not being displayed inside the popover (JQuery / Javascript / HTML / Bootstrap)
如何使用 JavaScript 創建具有屬性和事件的 HTML 元素？
[英]How do I create an HTML element with attributes and events using JavaScript?
在Twitter Bootstrap Popover中使用jQuery選擇元素
[英]Selecting an element with jQuery in a Twitter Bootstrap Popover
如何使用 jquery 在 Bootstrap 5 中創建和修改彈出框？
[英]How do you create and modify popover in Bootstrap 5 using jquery?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.