Bootstrap入门（二十九）JS插件6：弹出框

Posted 2020-08-11

Bootstrap入门（二十九）JS插件6：弹出框

加入小覆盖的内容，像在iPad上，用于存放非主要信息

弹出框是依赖于工具提示插件的，那它也和工具提示是一样的，是需要初始化才能够使用的

首先我们引入CSS文件和JS文件

        <link href="bootstrap.min.css" rel="stylesheet">

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

首先我们来创建几个按钮来作为触发

        <div class="container">
            <button type="button" class="btn btn-default js-popover" data-toggle ="popover" data-placement="bottom" title="标题" data-content="内容">弹出框1</button>
        </div>

他的使用还需要我们在添加js代码（初始化）

（注意，这里索引的是class里面的）

        <script>
            $(".js-popover").popover();
        </script>

打开页面，点击按钮

我们也有另外的方向，只要把data-placement="bottom"里面的bottom改为left、right、top就可以了（默认是左侧）

 这种情况下是点击按钮出现，点击按钮消失，有时候，我们想按空白处让它消失怎么办呢？

只需要在按钮的属性中添加一个新属性data-trigger="focus"就可以了

        <div class="container">
            <button type="button" class="btn btn-default js-popover" data-toggle ="popover" data-placement="bottom" title="标题" data-content="内容" data-trigger="focus">弹出框1</button>
        </div>

刷新页面，点击按钮，内容出现，点击空白处，消失。

 

其实这是默认有一个过度效果的，如果我们想要合格效果消失（也就是突然弹出突然消失），可以继续添加属性data-animation="false"就可以了

有时候我们希望当网页展示的时候就显示出来，可以修改js代码

        <script>
            $(".js-popover").popover(‘show‘);
        </script>

 

和其他js插件一样，他有四种情况，出现前，出现后，隐藏前，隐藏后

尝试最简单的弹出提示框，这里是隐藏后

修改js代码

        <script>
            $(".js-popover").on("hidden.bs.popover",function(e){
                alert("hello");
            });
        </script>

刷新页面，点击按钮，让弹出框消失后，提示hello