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

Bootstrap入门(二十九)JS插件6:弹出框的更多相关文章

  1. Bootstrap的js插件之弹出框(popover)

    data-toggle="popover"--使弹出框可以切换状态: title--设置弹出框的标题: data-content--设置弹出框的内容部分: data-placeme ...

  2. Bootstrap入门(三十)JS插件7:警告框

    Bootstrap入门(三十)JS插件7:警告框 通过这个插件可以为警告信息添加点击以及消失的功能. 当使用一个.close按钮,它必须是第一个子元素.alert-dismissible,并没有文字内 ...

  3. Bootstrap入门(二十三)JS插件1:模态框

    Bootstrap入门(二十三)JS插件1:模态框 1.静态实例 2.动态实例 3.模态框的尺寸和效果 4.包含表单的模态框 模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能 ...

  4. Bootstrap <基础二十九>面板(Panels)

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  5. Bootstrap入门(十九)组件13:页头与缩略图

    Bootstrap入门(十九)组件13:页头与缩略 1.页头 2.默认的缩略图 3.自定义缩略图 页头组件能够为 h1 标签增加适当的空间,并且与页面的其他部分形成一定的分隔.它支持 h1 标签内内嵌 ...

  6. 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

    原生Js封装的弹出框-弹出窗口-页面居中-多状态可选   实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...

  7. layer.js漂亮的弹出框

    它的官方网站:http://layer.layui.com/ 消息.确认框.ifame.自定义文本.旋转木马,都有按钮,是一款强大的js 弹出框: 以下为本人的简单介绍: layer.open({ t ...

  8. 前段js的各种弹出框

    artDialog 首页 > 文档与示例 artDialog —— 经典的网页对话框组件,内外皆用心雕琢. 支持普通与 12 方向气泡状对话框 完善的焦点处理,自动焦点附加与回退 支持 ARIA ...

  9. (二十九)c#Winform自定义控件-文本框(二)

    前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. 开源地址:https://gitee.com/kwwwvagaa/net_winform_custom_control ...

  10. 仿酷狗音乐播放器开发日志二十六 duilib在标题栏弹出菜单的方法

    转载请说明原出处,谢谢~~ 上篇日志说明了怎么让自定义控件响应右键消息.之后我给主窗体的标题栏增加右键响应,观察原酷狗后可以发现,在整个标题栏都是可以响应右键并弹出菜单的.应该的效果如下: 本以为像上 ...

随机推荐

  1. SpringMVC+Spring+hibernate整合及分页

    1. 新建web project 2. 引入jar, 3. 创建包com.tgb.web.controller, 下面创建包(dao,entity,service, config,spring,hib ...

  2. html中的空白字符问题

    1.当我们想使用百分比来进行两个盒子的并排 代码: <!DOCTYPE html> <html lang="en"> <head> <me ...

  3. Nginx 虚拟主机下支持Pathinfo并隐藏入口文件的完整配置

    server { listen 80; server_name zuqiu.com; # 设置你的域名 index index.html index.htm index.php; root D:/wn ...

  4. EF 报【序列包含一个以上的元素】解决办法

    1.检查模型是否存在重复的字段,eg: public class AggregateRoot { public System.Guid Guid { get; set; } } public part ...

  5. man info --help区别

    --help: 是一个工具选项,可以用来显示一些工具的信息 man : 可以显示系统手册页中的内容,这些内容大多数都是对命令的解释信息 PS: () Space 键可以显示下一屏的文本信息 () q ...

  6. (中等) POJ 2948 Martian Mining,DP。

    Description The NASA Space Center, Houston, is less than 200 miles from San Antonio, Texas (the site ...

  7. [Unity WWW] 跨域访问解决方法

    什么是跨域访问 域(Domain)是Windows网络中独立运行的单位,域之间相互访问则需要建立信任关系(即Trust Relation).信任关系是连接在域与域之间的桥梁.当一个域与其他域建立了信任 ...

  8. Codeforces#355

    大小号刷题,大号,被查重,悲剧,最后小号过了3题 A题: 分析:大于h的+2,小于等于h的+1 #include <iostream> #include <cstdio> #i ...

  9. 11、手把手教你Extjs5(十一)模块界面的总体设计

    上一节中设计了一些模块自定义中用到的要素,为了直观起见,这一节先建立一个模块的主界面.看过我 模块管理常规功能自定义系统的设计与实现 博客的人应该会有所了解了.一个模块的主界面是一个Grid,在其上方 ...

  10. 《javascript语言精粹》——第3章对象

    第三章:对象: 属性名字:可以是包括空字符串在内的任意字符串: 属性值:是除undefined值之外的任何值; [1].对象字面量: var obj={}; //空对象 var obj = new O ...