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

转载于:https://www.cnblogs.com/hnnydxgjj/p/5917915.html

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

Bootstrap入门（三十）JS插件7：警告框
Bootstrap入门(三十)JS插件7:警告框通过这个插件可以为警告信息添加点击以及消失的功能. 当使用一个.close按钮,它必须是第一个子元素.alert-dismissible,并没有文字内 ...
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
实现了一下功能: 1.title可自定义可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出框里的html 5.确定取消按钮可选调用方法: 1 P ...
php js对话框,JavaScript_js弹出框、对话框、提示框、弹窗实现方法总结(推荐)，一、JS的三种最常见的对话框- phpStudy...
js弹出框.对话框.提示框.弹窗实现方法总结(推荐) 一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ==================== ...
Layer.js——强大的弹出框
简介 layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是能轻易获胜.她 ...
html中利用js写一个弹出注册框,原生js实现一个弹出框
其实弹出框的实现非常的简单.网上有很多种类的弹出框,比如jquery ui 的dialog colorbox fancybox等.jquery ui的dialog是一个专业的对话框而colorbox ...
零基础语法入门二十九/三十讲讲 [情态动词否定和疑问and情态动词加上完成时的形式]
情态动词的否定形式情态动词 + not +动词原形 1. He can't sing an Ecglish song. 2. He may not know her. 他可能不认识她 3. He c ...
js美化alert()弹出框
使用重定义 //弹出自定义提示窗口 var showAlert= function(msg,url,element){//遮罩if ( $("#cover_alert").leng ...
[JS]JS模拟Alert弹出框效果--自定义CSS样式
function alertMsg(msg, mode) { //mode为空,即只有一个确认按钮,mode为1时有确认和取消两个按钮msg = msg || '';mode = mode || 0; ...
页面拖动功能jquery +js+html5 移动弹出框拖动弹出框拖动 div 拖动弹出框
实现逻辑分析: 1.当鼠标触发按下事件 2.记录当前屏幕坐标 3.和要控制的div坐标向减的到二者之间关系 4.通过鼠标移动事件 5.激活div移动事件 6.div的新位置就鼠标位置和原始坐标的关系值 ...
js关闭layui弹出框
如有index那时非常简单的 layer.close(index) 但如果我们在外部取不到index呢其实也不难其中包含的几个函数 layer.closeAll(); //疯狂模式,关闭所有层 l ...

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

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

最新文章

热门文章