首页 > 代码库 > bootstrap弹出框

bootstrap弹出框

2024-07-04 06:38:12   227人阅读

要想使用Bootstrap Popover（弹出框）则必须引入其依赖的文件:

jquery.js这个必须的(还是要写在其他js前面,bootstrap是依赖jquery的哦)

bootstrap-tooltip.js

bootstrap-popover.js

bootstrap.css

我试过不引入bootstrap-tooltip.js和bootstrap-popover.js这两个js文件.但是效果不是很好.当鼠标移入进去的时候不能即时的弹出提示层(而是必须点击按钮才行).这显然不是我们要的效果.

以下是我做的实例代码:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<head>
    <title>bootstrap弹出框</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
    <script  src="bootstrap/js/jquery.1.9.1.js"></script>
    <script  src="bootstrap/js/bootstrap-tooltip.js"></script>
    <script  src="bootstrap/js/bootstrap-popover.js"></script>
    
</head>    

<body>
    <div class="container">
    <h2>
        我是弹出框的实例
    </h2>
    <div class="well">
        <a href="#" id="example" class="btn btn-danger"
         rel="popover" data-content="我是弹出框显示内容" data-original-title="我是标题">点我,我是弹出框</a>
    </div>
    
    </div>

</body>
<script type="text/javascript">
$(function ()
{ $("#example").popover();
});
</script>
</html>
View Code

值得注意的是下面这段js代码是我们必须要引入的(id可以换成自己起的):

<script type="text/javascript">
$(function ()
{ $("#example").popover();
});
</script>

在测试过程中也遇到了一些问题.比如弹出层的样式不是自己想要的效果:

这显然不是我们想要的结果,我们要的效果"我是弹出框显示内容"应该要比标题小的.于是我先看了下bootstrap-popover.js文件,发现这部分代码用的样式是.popover-content.于是我又去bootstrap.css中查找该class

.popover-content {
  padding: 9px 14px;
//这里是我修改过的 如果修改默认的尺寸为14
  font-size: 10px;
}

修改后的效果如图:

这样弹出框的实例就完成了.希望对大家有帮助.

 


联系
我们