如何在jQuery彈出窗口中添加多個數據內容？

我想讓我的彈出窗口顯示多個數據內容，即彈出窗口中的3行不同文本。我有以下代碼，來自w3schols。如何在jQuery彈出窗口中添加多個數據內容？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 
    <h3>Popover Example</h3> 
    <a href="#" data-toggle="popover" title="Popover Header" data-placement="bottom" data-content="Info 1">Toggle popover</a> 
</div> 

<script> 
$(document).ready(function(){ 
    $('[data-toggle="popover"]').popover(); 
}); 
</script> 

</body> 
</html>

彈出窗口看起來像這樣。

Popover example

我想酥料餅顯示如「信息1」，「信息2」和「信息3」之類的列表視圖3個選項。我怎樣才能做到這一點？

來源

2016-06-11 Arijit Goswami

Try：

Demo; http://jsfiddle.net/jo6og612/

1）定義的HTML要在酥料餅

<div class="container"> 
    <h3>Popover Example</h3> 
    <a href="#" data-toggle="popover" title="Popover Header" data-placement="bottom">Toggle popover</a> 
    <div id="popover-content"> 
    <ul> 
     <li> Info 1 </li> 
     <li> Info 2 </li> 
     <li> Info 3 </li> 
    </ul> 
    </div> 
</div>

2顯示格）添加酥料餅的內容和HTML屬性

<script> 
$(document).ready(function(){ 
    $('[data-toggle="popover"]').popover(
     html: true, 
     content: function() { 
      return $('#popover-content').html(); 
     } 
    ); 
}); 
</script>

來源

2016-06-11 06:38:10

如何在jQuery彈出窗口中添加多個數據內容？

回答

相關問題