Home > Web Front-end > JS Tutorial > body text

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

WBOY
Release: 2016-05-16 15:11:16
Original
1533 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.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template