Bootstrap 弹出框在动态控件上显示标题但不显示内容

Question

我有一个使用 .NET 4.5 和 VisualBasic 和 Bootstrap 3.7 的 ASP.NET 项目。在特定页面上，根据用户所做的选择在页面的MainContent 容器中创建动态 html 表。该表的数据来自 SQL Server 数据库。在表格的选定单元格中，使用 javascript 函数调用添加图像（在创建表格的同时动态地）以创建和打开引导弹出窗口。 javascript 函数位于页面的MainContent 容器内。向函数发送 3 个参数——图像的 id、标题和适用于该图像的内容。所有 3 个值都作为字符串值发送。

弹出框的工作方式完全符合我的预期，只是它不填充内容。当我从 1 个弹出框图像单击到另一个时，会显示每个不同弹出框的相应标题，并且弹出框位于正确的位置。我知道数据是由 javascript 函数发送和接收的。如果在 JavaScript 函数中我将 document.getElementById(ctrlTransfer) 更改为 'image'，弹出框会同时显示正确的标题 和 内容。 （它不是由单击的特定弹出图像定位，而是由页面上的第一个非动态图像定位。此外，当'image' 被替换时，单击其他弹出图像不会更改标题或内容。）

这里是 JavaScript 函数

<script type="text/javascript">
   function DisplayTransferValues(TransferControl, TransferTitle, TransferValue) {
      if (TransferTitle != 'undefined') {
         var ctrlTransfer = 'MainContent_' + TransferControl;

         $document.getElementById(ctrlTransfer)).popover({
            trigger: 'hover',
            html: true,
            title: TransferTitle,
            content: TransferValue,
         }).popover("show");
      }
   }
</script>

html 表格是通过调用 ASP.NET 子程序（在项目的独立代码模块中）创建的，该子程序有选择地将弹出图像放置在表格的某些单元格中。

为弹出框创建图像的代码如下：

Dim ibnTrnsfr As ImageButton = New ImageButton
ibnTrnsfr.ID = "ibnTrnsfr" & strCntrlCounter
ibnTrnsfr.Height = 12
ibnTrnsfr.Width = 12

If Not arrScheming(intRow, intCol, 25).Equals(DBNull.Value) Then
   ibnTrnsfr.ImageUrl = "/Images/TransferOutBlue4.png"
   strTransfrOut = "Transfer Out of " & strCntrlCounter
   ibnTrnsfr.OnClientClick = "DisplayTransferValues('" & ibnTrnsfr.ID & "', '" & strTrnsfrOut & "', '" & arrScheming(intRow, intCol, 25) & "'); return false;"
ElseIf Not arrScheming(intRow, intCol, 26).Equals(DBNull.Value) Then
   ibnTrnsfr.ImageUrl = "/Images/TransferOutBlue4.png"
   strTransfrIn = "Transfer into " & strCntrlCounter
   ibnTrnsfr.OnClientClick = "DisplayTransferValues('" & ibnTrnsfr.ID & "', '" & strTrnsfrIn & "', '" & arrScheming(intRow, intCol, 26) & "'); return false;"
End If

后面的页面代码中的附加代码实际上是将此图像添加到表格单元格中。

我已经采取的步骤：

1. 在 DisplayTransferValues 函数中添加了一个函数，用于接收内容数据并进行填充。

2. 为 DisplayTransferValues 添加了加载时间延迟。

3. 切换了发送给函数的参数中“TransferTitle”和“TransferValue”的顺序。它成功地将 TransferValue 中的正确数据加载到弹出框的标题区域中。

我希望在弹出窗口中同时填充标题和内容。

感谢您的帮助。

Answer 1

我在 getbootstrap.com 上做了一些额外的研究，发现有时父元素的样式会干扰弹出框内的 html。只需添加容器：'body'，即可解决问题：

<script type="text/javascript">
   function DisplayTransferValues(TransferControl, TransferTitle, TransferValue) {
      if (TransferTitle != 'undefined') {
         var ctrlTransfer = 'MainContent_' + TransferControl;
         $document.getElementById(ctrlTransfer)).popover({
            container: ' body',
            trigger: 'hover',
            html: true,
            title: TransferTitle,
            content: TransferValue,
         }).popover("show");
      }
   }
</script>

现在标题和内容都已正确填充到 Bootstrap 弹出窗口中。