实例

为任意元素添加一小块浮层,用于存放非主要信息。

弹出框的标题和内容的长度都是零的话将永远不会被显示出来。

初始化

由于性能的原因,工具提示和弹出框的 data 编程接口(data api)是必须要手动初始化的

在一个页面上一次性初始化所有弹出框的方式是通过 data-toggle 属性选中

<!DOCTYPE HTML>
<html>
<head>
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" >
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/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>
</body>
</html>

1.用法

通过 JavaScript

通过 JavaScript 启用弹出框(popover):

  1. $('#example').popover(options)

2.参数

可以通过 data 属性或 JavaScript 传递参数。对于 data 属性,将参数名附着到 data- 后面,例如 data-animation=""

选项名称 类型/默认值 Data 属性名称 描述
animation boolean
默认值:true
data-animation 为弹出框赋予淡出的 CSS 动画效果。
html boolean
默认值:false
data-html 向弹出框插入 HTML。如果为 false,jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击,请使用 text
placement string|function
默认值:top
data-placement 规定如何定位弹出框(即 top|bottom|left|right|auto)。
当指定为 auto 时,会动态调整弹出框。例如,如果 placement 是 "auto left",弹出框将会尽可能显示在左边,在情况不允许的情况下它才会显示在右边。
selector string
默认值:false
data-selector 如果提供了一个选择器,弹出框对象将被委派到指定的目标。
title string | function
默认值:''
data-title 如果未指定 title 属性,则 title 选项是默认的 title 值。
trigger string
默认值:'hover focus'
data-trigger 定义如何触发弹出框:click| hover | focus | manual。您可以传递多个触发器,每个触发器之间用空格分隔。
delay number | object
默认值:0
data-delay 延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字,那么延迟将会应用于显示和隐藏。如果提供的是对象,结构如下所示:
  1. delay:
  2. { show: 500, hide: 100 }
container string | false
默认值:false
data-container 向指定元素追加弹出框。
实例: container: 'body'

3.方法

下面是一些弹出框(Popover)插件中有用的方法:

方法 描述 实例
Options: .popover(options) 向元素集合附加弹出框句柄。
  1. $().popover(options)
Toggle: .popover('toggle') 切换显示/隐藏元素的弹出框。
  1. $('#element').popover('toggle')
Show: .popover('show') 显示元素的弹出框。
  1. $('#element').popover('show')
Hide: .popover('hide') 隐藏元素的弹出框。
  1. $('#element').popover('hide')
Destroy: .popover('destroy') 隐藏并销毁元素的弹出框。
  1. $('#element').popover('destroy')

<!DOCTYPE HTML>
<html>
<head>
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" >
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
 </head>
<body>
<div class="container" style="padding: 100px 50px 10px;" >
   <button type="button" class="btn btn-default popover-show"
      title="Popover title" data-container="body"
      data-toggle="popover" data-placement="left"
      data-content="左侧的 Popover 中的一些内容 —— show 方法">
      左侧的 Popover
   </button>
   <button type="button" class="btn btn-primary popover-hide"
      title="Popover title" data-container="body"
      data-toggle="popover" data-placement="top"
      data-content="顶部的 Popover 中的一些内容 —— hide 方法">
      顶部的 Popover
   </button>
   <button type="button" class="btn btn-success popover-destroy"
      title="Popover title" data-container="body"
      data-toggle="popover" data-placement="bottom"
      data-content="底部的 Popover 中的一些内容 —— destroy 方法">
      底部的 Popover
   </button>
   <button type="button" class="btn btn-warning popover-toggle"
      title="Popover title" data-container="body"
      data-toggle="popover" data-placement="right"
      data-content="右侧的 Popover 中的一些内容 —— toggle 方法">
      右侧的 Popover
   </button><br><br><br><br><br><br>
   <p class="popover-options">
      <a href="javascript:void(0);" type="button" class="btn btn-warning" title="<h2>Title</h2>"  
         data-container="body" data-toggle="popover" data-content="
         <h4>Popover 中的一些内容 —— options 方法</h4>">
         Popover
      </a>
   </p>
   <script>
      $(function () { $('.popover-show').popover('show');});
      $(function () { $('.popover-hide').popover('hide');});
      $(function () { $('.popover-destroy').popover('destroy');});
      $(function () { $('.popover-toggle').popover('toggle');});
     $(function () { $(".popover-options a").popover({html : true });});
   </script>
</div>
</body>
</html>

4.事件

下表列出了弹出框(Popover)插件中要用到的事件。

事件 描述 实例
show.bs.popover 当调用 show 实例方法时立即触发该事件。
  1. $('#mypopover').on('show.bs.popover', function () {
  2. // 执行一些动作...
  3. })
shown.bs.popover 当弹出框对用户可见时触发该事件(将等待 CSS 过渡效果完成)。
  1. $('#mypopover').on('shown.bs.popover', function () {
  2. // 执行一些动作...
  3. })
hide.bs.popover 当调用 hide 实例方法时立即触发该事件。
  1. $('#mypopover').on('hide.bs.popover', function () {
  2. // 执行一些动作...
  3. })
hidden.bs.popover 当工具提示对用户隐藏时触发该事件(将等待 CSS 过渡效果完成)。
  1. $('#mypopover').on('hidden.bs.popover', function () {
  2. // 执行一些动作...
  3. })

<!DOCTYPE HTML>
<html>
<head>
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" >
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
 </head>
<body>
<div clas="container" style="padding: 100px 50px 10px;" >
   <button type="button" class="btn btn-primary popover-show"
      title="Popover title" data-container="body"
      data-toggle="popover"
      data-content="左侧的 Popover 中的一些内容 —— show 方法">
      左侧的 Popover
   </button>
</div>
   <script>
      $(function () { $('.popover-show').popover('show');});
      $(function () { $('.popover-show').on('shown.bs.popover', function () {
      alert("当显示时警告消息");
   })});
   </script>
</body>
</html>

bootstrap-js(六)弹出框的更多相关文章

  1. js自定义弹出框

    js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...

  2. js 常见弹出框学习

    模拟系统的弹出框 系统自带的弹出框 总结 链接  http://blog.csdn.net/anhuidelinger/article/details/17024491 参考这个网站学习模态框的动态弹 ...

  3. Bootstrap篇:弹出框和提示框效果以及代码展示

     前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你 ...

  4. 【原创】贡献一个JS的弹出框代码...

    一.前言 最近在做一个项目,自己感觉系统自带的alert()方法的弹出框实在是不堪入目,所以在网上找了一些资料,然后自己加工了一下,做出了自己的一个js弹出框,在这里贡献出来,希望对你有帮助. 二.开 ...

  5. js登录弹出框插件

    第一步:页面引入css:<link rel="stylesheet" type="text/css"" href="common/cs ...

  6. jsp + js + 前端弹出框

    在项目中,前端页面我们时常需要各种各样的弹出框: 1.alert对话框:显示含有给定消息的"JavaScript Alert"对话框 代码: var a = "Hello ...

  7. js swal()弹出框

    做前端开发的时候时常会遇到修改成功.新增成功这类弹出框,用alert的话未免有点太low了,而swal()是一个简单又实用的弹出框方法 alert 弹出框样式如下: swal() 弹出框样式如下: 代 ...

  8. php中bootstrap框架.popover弹出框,鼠标移动到上面自动显示,离开自动消失

    <div rel="name"></div> <script> $(function(){//显示弹出框 $("[rel=name]& ...

  9. js实现弹出框的拖拽

    //HTML部分 <div class="wrap"></div> <div class="popUpBox"> <d ...

随机推荐

  1. 【LeetCode】 Populating Next Right Pointers in Each Node 全然二叉树

    题目:Populating Next Right Pointers in Each Node <span style="font-size:18px;">/* * Le ...

  2. jquery知识点积累

    网上资源汇总学习: jquery的选择器是CSS1-3,xpath的结合物.JQuery提取了这二种查询语言最好的部分,创造出了最终的jquery表达式查询语言. xpath是一门在xml文档里查找信 ...

  3. 将项目上传到bitbucket仓库

    先将项目添加git仓库中(本地) 成功后上门会有上传和下载按钮 提交代码:

  4. Nullable<T> 与 T?

    Nullable<T> : 基础类型为值类型的对象,值类型的对象和引用类型的对象一样也可以分配 null.可空类型. Nullable<int> 与 int?是同样的意思. ; ...

  5. 开启MSSQLServer跨服务器查询功能

    首先在MSSQL客户端中进行如下图文操作配置 其次使用脚本进行操作配置 ---开启SQLServer 跨服务器查询功能 exec sp_configure 'show advanced options ...

  6. asp.net mvc 生成条形码

    using System; using System.Collections; using System.Collections.Generic; using System.Drawing; usin ...

  7. 读书笔记-实用单元测试(英文版) Pragmatic Unit Testing in C# with NUnit

    读书笔记-实用单元测试(英文版) Pragmatic Unit Testing in C# with NUnit Author: Andrew Hunt ,David Thomas with Matt ...

  8. c# 委托 delegate

    委托是一种存储函数引用的类型,在事件和事件的处理时有重要的用途 通俗的说,委托是一个可以引用方法的类型,当创建一个委托,也就创建一个引用方法的变量,进而就可以调用那个方法,即委托可以调用它所指的方法. ...

  9. Apache Tiles 2.x 应用指南(转)

    转自:http://jaymsimusic.iteye.com/blog/1138906 Apache Tiles 2.x 应用指南 博客分类: Apache Tiles   Jakarta Tile ...

  10. JavaWeb核心编程之(四.1)JSP

    JSP简介: JSP是简化Servlet编写的一种技术, 它将Java代码和HTML语句混合在一个文件中编写, 只对网页中药动态产生的内容采用Java代码来编写, 而对固定不变的静态内容采用普通的静态 ...