Solution to the problem that the Bootstrap pop-up box cannot be called

Solution to the problem that the Bootstrap pop-up box cannot be called_javascript skills

WBOY

Release： 2016-05-16 15:11:16

Original

1526 people have browsed it

Problem Description

The front-end framework bootstrap was used in writing the project, and the functions provided are very powerful!

bootstrap learning

However, when using the pop-up box component provided by bootstrap, the pop-up box cannot pop up!

Logically it should be like this:

The official example is written like this:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 弹出框（Popover）插件</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding: 100px 50px 10px;" >
<button type="button" class="btn btn-default" title="Popover title" 
data-container="body" data-toggle="popover" data-placement="left" 
data-content="左侧的 Popover 中的一些内容">
左侧的 Popover
</button>
<button type="button" class="btn btn-primary" title="Popover title" 
data-container="body" data-toggle="popover" data-placement="top" 
data-content="顶部的 Popover 中的一些内容">
顶部的 Popover
</button>
<button type="button" class="btn btn-success" title="Popover title" 
data-container="body" data-toggle="popover" data-placement="bottom" 
data-content="底部的 Popover 中的一些内容">
底部的 Popover
</button>
<button type="button" class="btn btn-warning" title="Popover title" 
data-container="body" data-toggle="popover" data-placement="right" 
data-content="右侧的 Popover 中的一些内容">
右侧的 Popover
</button>
</div>
<script>$(function () 
{ $("[data-toggle='popover']").popover();
});
</script>
</div>
</body>
</html>

Copy after login

Check the code three times. After confirming that the code is correct, enter Firefox debug,

<script>
$(function () 
{ 
$("[data-toggle='popover']").popover(); 
});
</script>

Copy after login

This piece of code is global and will be activated as soon as you enter the page, jumping directly into the bootstrap js framework:

Solution to the problem that the Bootstrap pop-up box cannot be called_javascript skills

It actually said that I didn’t import jquery! But I clearly introduced it!

<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<script type="text/javascript" src="js/jquery.min.js" ></script>

Copy after login

Retarded? . . . . . .

Later I thought about it, bootstrap depends on jquery, so I adjusted the order of references with the mentality of giving it a try:

<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>

Copy after login

Through the above content, the problem of the Bootstrap pop-up box being unable to be called has been successfully solved. Friends who encounter problems with the bootstrap pop-up box can refer to this tutorial.