javascript - Bootstrap 弹出窗口在动态控件上显示标题但不显示内容

Question

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

弹出窗口的工作方式与我预期的完全一样，只是它不填充内容。当我从一个弹出窗口图像单击到另一个弹出窗口图像时，会显示每个不同弹出窗口的相应标题，并且弹出窗口位于正确的位置。我知道数据是由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 Popover 中。