脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → BootStrap自定义popover,点击区域隐藏功能

BootStrap自定义popover,点击区域隐藏功能的实现

 更新时间：2018年01月23日 09:15:41   作者：lxyamxj  
下面小编就为大家分享一篇BootStrap自定义popover,点击区域隐藏功能的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

当用bootstrap时，经常需要在某个地方添加帮助按钮，点击或者鼠标悬浮时，提示帮助信息，然而，bt给我们提供的方法里貌似没有，如果有哪位大神知道bootstrap有的可以留言，小弟学习了：代码如下

之前的按钮必须定义class为pop；

$(function(){
    $(".pop").popover({placement:'right', trigger:'manual', delay: {show: 10, hide: 10}, html: true,
      title: function () {
        return $("#data-original-title").html();
      },
      content: function () {
       return $("#data-content").html(); // 把content变成html
      }});
    $('body').click(function (event) {
      var target = $(event.target);    // 判断自己当前点击的内容
      if (!target.hasClass('popover')
          && !target.hasClass('pop')
          && !target.hasClass('popover-content')
          && !target.hasClass('popover-title')
          && !target.hasClass('arrow')) {
        $('.pop').popover('hide');   // 当点击body的非弹出框相关的内容的时候，关闭所有popover
      }
    });
    $(".pop").click(function (event) {
      $('.pop').popover('hide');     // 当点击一个按钮的时候把其他的所有内容先关闭。
      $(this).popover('toggle');     // 然后只把自己打开。
    });
  });

--------代码非原创，借鉴网上大神，纯粹自己学习记录而已，勿喷！

以上这篇BootStrap自定义popover,点击区域隐藏功能的实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JavaScript读二进制文件并用ajax传输二进制流的方法

    JavaScript读二进制文件并用ajax传输二进制流的方法

    这篇文章主要介绍了JavaScript读二进制文件并用ajax传输二进制流的方法的相关资料,需要的朋友可以参考下
    2016-07-07
  • JavaScript深入刨析this的指向以及如何修改指向

    JavaScript深入刨析this的指向以及如何修改指向

    JavaScript中this也是一件很神奇 事情，在面向对象（比如java）中表示一个当前的对象引用，但是在JavaScript中this不是固定不变的，而是随着运行环境的改变而改变
    2021-11-11
  • JS实现拖动示例代码

    JS实现拖动示例代码

    JS实现拖动的方法有很多，在本文将为大家介绍下使用getBoundingClientRect()方法是如何实现的，感兴趣的朋友不要错过
    2013-11-11
  • Bootstrap框架的学习教程详解(二)

    Bootstrap框架的学习教程详解(二)

    Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。本文给大家介绍Bootstrap框架的学习教程详解，对bootstrap框架感兴趣的朋友跟着小编一起学习吧
    2016-10-10
  • AJAX请求与跨域问题解决方法详解

    AJAX请求与跨域问题解决方法详解

    学习ajax必须得掌握的就是跨域请求,实际上在不同源的地址上发送请求就是跨域请求,本文主要给大家介绍了关于AJAX请求以及解决跨域问题的相关资料,需要的朋友可以参考下
    2022-11-11
  • JavaScript建立一个语法高亮输入框实现思路

    JavaScript建立一个语法高亮输入框实现思路

    通常网站自带的textarea编辑器不能满足我们的需求比如高亮显示代码等,在这篇文章中，我将使用JavaScript库ACE来创建一个输入框效果,该脚本允许开发人员创建支持语法高亮的输入框,感兴趣的你可不要错过了哈
    2013-02-02
  • uniapp中使用render.js进行openlayers、arcgis等地图操作实战指南

    uniapp中使用render.js进行openlayers、arcgis等地图操作实战指南

    renderjs是一个运行在视图层的js,它比WXS更加强大,它只支持app-vue和h5,下面这篇文章主要给大家介绍了关于uniapp中使用render.js进行openlayers、arcgis等地图操作的相关资料,需要的朋友可以参考下
    2024-01-01
  • JS中的==运算： [''''] == false —>true

    JS中的==运算： [''''] == false —>true

    这篇文章主要介绍了JS中的==运算： [''] == false —>true的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-07-07
  • 实例详解JSON取值(key是中文或者数字)方式

    实例详解JSON取值(key是中文或者数字)方式

    本文通过实例详解JSON取值(key是中文或者数字)方式，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
    2017-08-08
  • javascript 检测浏览器类型和版本的代码

    javascript 检测浏览器类型和版本的代码

    如果对javascript了解不是特别深入的话,很容易就会写出不兼容的代码(就像我),这时候就得判断浏览器了。比如事件侦听、一些鼠标和键盘事件、Range等,一些都会不一样.下面列出几种常用的检测浏览器方法，以飨观众!
    2009-09-09

最新评论