Question

以下是包含按钮的代码。在按钮上单击一个带有硬编码详细信息的弹出窗口。

popover是否可以从Buttons属性中获取详细信息，例如data-name = "Vikas" data-content = "He is a student" data-dp = "../dp.jpg"
第二个问题是当用户再次点击按钮时，弹出窗口将关闭。是否可以停止它，而不是这样我们可以在弹出框中提供关闭按钮，并且在其单击时应该关闭弹出窗口。

非常感谢您的帮助。

＆＃13;

<!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>

＆＃13;

Answer 1

只是一个例子，应该帮助你：

动态内容：

<!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>

查看popover trigger param：

如何触发弹出窗口 - 单击|悬停|焦点|手册。你可以传递多个触发器;用空格隔开它们。手册不能结合任何其他触发器。

如何使用jquery或JavaScript将元素属性与Bootstrap Popover html绑定？

1 个答案: