Bootstrap实现提示框和弹出框效果


Posted in Javascript onJanuary 11, 2017

首先讲一讲提示框(Tooltip) 的使用方法

样式文件:

LESS版本:对应源文件 tooltips.less

<style id="jsbin-css">
 body {
 padding: 100px;
 }
 .btn {
 margin: 20px 10px 20px;
 }
 </style>
</head>
<body>
 <h3>按钮做的提示框</h3>
 <button type="button" 
   class="btn btn-default" 
   data-toggle="tooltip" 
   data-placement="left" 
   data-original-title="提示框居左" 
   title="">
 提示框居左  
 </button> 

 <button type="button" 
   class="btn btn-default" 
   data-toggle="tooltip" 
   data-placement="top" 
   data-original-title="提示框在顶部">
 提示框在顶部
 </button>

 <button type="button" 
   class="btn btn-default" 
   data-toggle="tooltip" 
   data-placement="bottom" 
   data-original-title="提示框在底部">
 提示框在底部    
 </button>

 <button type="button" 
   class="btn btn-default" 
   data-toggle="tooltip" 
   data-placement="right" 
   data-original-title="提示框居右">
 提示框居右  
 </button>

 <h3>链接制作的提示框</h3>
 <a class="btn btn-primary" 
  data-toggle="tooltip" 
  data-placement="left" 
  title="提示框居左">
  提示框居左
 </a>

 <a class="btn btn-primary" 
  data-toggle="tooltip" 
  data-placement="top" 
  title="提示框在顶部">
  提示框在顶部
 </a>

 <a class="btn btn-primary" 
  data-toggle="tooltip" 
  data-placement="bottom" 
  title="提示框在底部">
  提示框在底部
 </a>

 <a class="btn btn-primary" 
  data-toggle="tooltip" 
  data-placement="right" 
  title="提示框在居右">
  提示框居右
 </a>

 <a href="##" 
  class="btn btn-primary" 
  id="myTooltip">
  我是提示框
 </a>

 <a href="##" 
  class="btn btn-primary" 
  id="myTooltip2">
  我是提示框2
 </a>
 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 <script>


 $(function(){
  //添加提示框的事件
 $('[data-toggle="tooltip"]').tooltip();

 //能过js来更改提示框
 $('#myTooltip').tooltip({
  title:"我是一个提示框,我在顶部出现",
  placement:'top'
 });
 });
 </script>

通过 title 属性的值来定义提示信息(也可以使用自定义属性 data-original-title 来设置提示信息)。
通过 data-placement 自定义属性来控制提示信息框的位置,根据四种不同的位置,data-placement具有四个值:top、right、bottom和left,分别表示提示框出现的位置在顶部、右边、底部和左边。
还有一个最重要的参数不可缺少,data-toggle=”tooltip”。

需要特别注意的是:

1、如果同时设置了 data-original-title 和 title 定义提示信息,那么 data-original-title 的优先级要高于 title。只有 data-original-title 值为空时,才会取 title 的值做为提示信息的内容。

2、Bootstrap框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发。

提示框?其他的自定义属性

Bootstrap实现提示框和弹出框效果

提示框?JS设置参数方法

Bootstrap实现提示框和弹出框效果

使用过JQuery UI应该知道,它里面有一个dialog的弹出框组件,功能也很丰富。与jQuery UI的dialog类似,Bootstrap里面也内置了弹出框组件。打开bootstrap 文档可以看到它的dialog是直接嵌入到bootstrap.js和bootstrap.css里面的,也就是说,只要我们引入了bootstrap的文件,就可以直接使用它的dialog组件,是不是很方便。本篇我们就结合新增编辑的功能来介绍下bootstrap dialog的使用。废话不多说,直接看来它如何使用吧。

弹出框(Popover)
不同的是:弹出框除了有标题 title 以外还增加了内容 content 部分。这个在提示框中是没有的。
样式文件:
☑ LESS版本:对应的源文件是 popovers.less

<button type="button" class="btn btn-default" id="myPopover">猛击我吧</button>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(function(){
 $('#myPopover').popover({
  title:"我是弹出框的标题",
  content:"我是弹出框的内容",
  placement:"right"
 });
});
</script>

弹出框?弹出框的结构

弹出框Popover和提示框tooltip相比,就多了一个content内容,那么在此使用 data-content 来定义弹出框中的内容。同样可以使用或者标签来制作,
调用popover的时候,options的参数与声明式选择里以data-开头的自定义属性一样。都可以在options里设置。

<button type="button" 
   data-toggle="popover" 
   class="btn btn-default" 
   id="myPopover">
   鼠标放上显示弹出框
 </button>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
//通过js来定义弹出框
$(function(){
 $('#myPopover').popover({
  title:"我是弹出框的标题",
  content:"我是弹出框的内容",
  placement:"top",
  trigger:"hover"
 });
});
</script>

Bootstrap实现提示框和弹出框效果

弹出框?提示框和弹出框的异同

提示框 tooltip 的默认触发事件是 hover 和 focus,而弹出框 popover 是 click
提示框 tooltip 只有一个内容(title),而弹出框不仅可以设置标题(title)还可以设置内容(content)

提示框tooltip的模板:

<div class="tooltip" role="tooltip">
 <div class="tooltip-arrow"></div>
 <div class="tooltip-inner"></div>
</div>

弹出框popover的模板:

<div class="popover" role="tooltip">
  <div class="arrow"></div>
  <h3 class="popover-title"></h3>
  <div class="popover-content"></div>
</div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 编程引入命名空间的方法
Jun 29 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
js全选实现和判断是否有复选框选中的方法
Feb 17 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
Jun 17 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
AngularJS的ng-click传参的方法
Jun 19 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
分享bootstrap学习笔记心得(组件及其属性)
Jan 11 #Javascript
jQuery实现CheckBox全选、全不选功能
Jan 11 #Javascript
理解javascript中的闭包
Jan 11 #Javascript
javascript常用经典算法详解
Jan 11 #Javascript
总结几道关于Node.js的面试问题
Jan 11 #Javascript
微信端开发--登录小程序步骤
Jan 11 #Javascript
Vue数据驱动模拟实现1
Jan 11 #Javascript
You might like
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
php数组(array)输出的三种形式详解
2013/06/05 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
100行Python代码实现自动抢火车票(附源码)
2018/01/11 Python
对python中的高效迭代器函数详解
2018/10/18 Python
python logging模块的使用总结
2019/07/09 Python
Python简易版图书管理系统
2019/08/12 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
python中操作文件的模块的方法总结
2021/02/04 Python
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
会计主管岗位职责范文
2013/11/08 职场文书
家长对孩子的感言
2014/03/10 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
捐助感谢信
2015/01/22 职场文书
电信营业员岗位职责
2015/04/14 职场文书
2015年客房服务员工作总结
2015/05/15 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
MySQL里面的子查询的基本使用
2021/08/02 MySQL