Question

我正在使用bootstrap，并且我正在尝试使用javascript，当您点击某个对象时，该javascript应该可视化弹出窗口，在我的情况下是隐藏的文本。这是我的代码：

<html>
<head>
        <link href="bootstrap.min.css" rel="stylesheet">
        <link href="bootstrap.min.js" rel="stylesheet">
        <script>
$('#text').popover()
</script>
</head>



<body>
<a id="text" href="#" class="btn btn-link" data-content='I want to visualize this when i click on it !' data-placement="bottom">I see this </a>
</body>
</html>

当我点击可视化文本（这是＆＃34;我看到它＆＃34;）时我没有做任何事情。显然我的整个代码不仅仅是这个，但实际上这个脚本并不像这样的简单HTML一样工作。

Answer 1

javascript作为样式表加载：将<link href="bootstrap.min.js" rel="stylesheet">替换为<script src="bootstrap.min.js"></script>，并将其放在</body>标记之前

Answer 2

使用jquery最好等到dom准备就绪。目前还不清楚你使用的是哪个bootstrap版本，但我假设版本为3。

您可以尝试以下代码，或查看示例：http://jsfiddle.net/astuanax/s96Ag/

<html>
<head>
    <!-- Load jquery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <!-- Load bootstrap from cdn, no need to load popover when loading the full bs library -->  
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">
    </script>
</head>
<body>


    <a id="text" href="#" class="btn btn-link" data-content='I want to visualize this when i click on it !' data-placement="bottom">I see this </a>

    <script type="text/javascript">
    /* Wait until the DOM is ready to call the popover function */
    $().ready(function(){
        $('#text').popover()
    });
    </script>
</body></html>

Answer 3

我修改了你告诉我的。这是完整的代码：

<html>
<head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
        <link href="bootstrap.min.css" rel="stylesheet">
        <script src="bootstrap.min.js"></script>


</head>
<script>
$('#text').popover()
</script>



<body>
<a id="text" href="#" class="btn btn-link" data-content='I want to visualize this when i click on it !' data-placement="bottom">I see this </a>

</body>
</html>

现在它显示以下错误：TypeError: $(...).popover is not a function和$('#text').popover()

所以我试着解决这个问题，并提出它要求的内容，这是新的代码：

<html>
<head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
        <link href="bootstrap.min.css" rel="stylesheet">
        <script src="bootstrap.min.js"></script>
        <script src="bootstrap-tooltip.js"></script>
        <script src="bootstrap-popover.js"></script>


</head>
<script>
$('#text').popover()
</script>



<body>
<a id="text" href="#" class="btn btn-link" data-content='I want to visualize this when i click on it !' data-placement="bottom">I see this </a>

</body>
</html>

现在没有错误，但仍然无效。

新尝试：

<html>
<head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <link href="bootstrap.min.css" rel="stylesheet">
        <script src="bootstrap.min.js"></script>
        <script src="bootstrap-tooltip.js"></script>
        <script src="bootstrap-popover.js"></script>


</head>
<script>
$('#text').popover()
</script>



<body>
<a id="text" href="#" class="btn btn-link" data-content='I want to visualize this when i click on it !' data-placement="bottom">I see this </a>

</body>
</html>

使用bootstrap可视化弹出窗口

3 个答案: