0

我正在使用以下代码将图像显示为弹出框

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="C:\Users\zj9\Desktop\dist\Page\assets\js\jquery.js"></script>
    <script src="C:\Users\zj9\Desktop\dist\Page\assets\js\bootstrap-tooltip.js"></script>
    <script src="C:\Users\zj9\Desktop\dist\Page\assets\js\bootstrap-popover.js"></script>
    <script type="text/javascript">

    $( document ).ready(function() {
        var img = '<img src="https://si0.twimg.com/a/1339639284/images/three_circles/twitter-bird-white-on-blue.png" />';
        $("#blob").popover({ title: 'Look!  A bird image!', content: img });    
    }
    </script>
  </head>
  <body>
    <a href="#" id="blob" class="btn large primary" rel="popover" style="margin-top: 300px">hover for popover</a>
  </body>
</html>

但是弹出框永远不会显示。我使用绝对路径只是为了确保这不是路径问题，会改变它。我没有html或java脚本编码的经验，非常感谢任何帮助。

4

1 回答 1

3

你错过了结束 ');' 为您的 javascript 块。这会导致弹出框未在链接上注册。

这是工作小提琴。另外，请注意，我添加了 trigger: 'hover' 和 html: true 属性，以便在悬停时显示弹出框并且呈现图像而不是显示文本。

  $( document ).ready(function() {
    var img = '<img src="https://si0.twimg.com/a/1339639284/images/three_circles/twitter-bird-white-on-blue.png" />';
  $("#blob").popover({ title: 'Look!  A bird image!', content: img, trigger: 'hover', html: true });    
});
于 2013-11-14T08:56:39.500 回答