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中各种trim的实现详细解析
Dec 10 Javascript
详解Javascript 装载和执行
Nov 17 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
详解vue-cli项目中怎么使用mock数据
May 29 Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 Javascript
分享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
php分页函数完整实例代码
2014/09/22 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
JS的千分位算法实现思路
2013/07/31 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
2016/10/10 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
js实现菜单跳转效果
2020/12/11 Javascript
Python 操作文件的基本方法总结
2017/08/10 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
Python内存读写操作示例
2018/07/18 Python
python烟花效果的代码实例
2020/02/25 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
应届生妇产科护士求职信
2013/10/27 职场文书
《胡杨》教学反思
2014/02/16 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
基于Go语言构建RESTful API服务
2021/07/25 Golang