Twitter Bootstrap 中的弹出框答案

【问题标题】：Popovers in Twitter BootstrapTwitter Bootstrap 中的弹出框
【发布时间】：2014-01-25 04:13:53
【问题描述】：

好的，所以我有以下 HTML 代码：

<!DOCTYPE html>
<html>
  <head>
    <title>FastCast</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/footer.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <link rel="shortcut icon" href="favicon1.ico"/>
  </head>
  <body>
    <center>
    <h1><b>Welcome to FastCast!</b></h1>
    <div>
    <p><font size="3">FastCast is a web application designed to gather weather information from various sources and display it in an easy-to-read format.</font></p>
    <hr></hr>
    <div id="picDiv">
    <img id="imgDisp" src="logo.jpg">
    </div>
    <p><font size="6">Enter you location to get started.</font></p>
    </div> 
    <form class="form-inline" role="form">
    <div class="form-group">
    <input type="text" class="form-control" id="Location" placeholder="ex. Boston, MA">
    </div>
    </form>
    <p><i>Press enter to continue.</i></p>
    <a id="test">Click me</a>
    <script>
    window.onkeydown = function(event) {
        if (event.keyCode === 13) {
            var x = document.getElementById("Location").value;
            var last2 = x.slice(-2);
            alert(last2);
        }
    }
    var i = 0;
    $('a#test').click(function() {
        i += 1;

        $('a#test').popover({
            trigger: 'manual',
            placement: 'right',
            content: function() {
               var message = last2;
                 return message;
            }
        });
        $('a#test').popover("show");

    });
    </script>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    </center>
    </body>
    <div class="footer" id="footer">Developed in Twitter Bootstrap | Information from openweathermap.org | Tyler Jablonski, 2014+</div>
</html>

最后我有一个链接，上面写着“点击我”。如您所见，在随后的脚本标签中，我有一段代码如下所示：

var i = 0;
    $('a#test').click(function() {
        i += 1;

        $('a#test').popover({
            trigger: 'manual',
            placement: 'right',
            content: function() {
               var message = last2;
                 return message;
            }
        });
        $('a#test').popover("show");

    });

我希望此代码在单击链接时会激活一个弹出框，但由于某种原因，它不起作用。什么都没有发生。为什么会这样，我怎样才能在 Bootstrap 中正确地制作一个弹出框，然后让它显示一个 JavaScript 变量？

谢谢！

【问题讨论】：

我注意到您的弹出框元素中没有：rel="popover"。也可以尝试添加：('a#test').tooltip();，以防工具提示未启用。

标签： javascript jquery html twitter-bootstrap popover

【解决方案1】：

您的弹出框元素 <a> 标记中缺少一些内容，格式如下：

<a id="test" data-toggle="tooltip" rel="popover">Click Me</a>

那么它应该可以工作，例如：http://jsfiddle.net/52VtD/1983/

【讨论】：