Bootstrap 弹出框-程序员宅基地

`一、Bootstrap 弹出框`

弹出框控件类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。
注意: 弹出框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 popover() 方法。

1.1 基本弹出框

通过向元素添加 data-toggle=“popover” 来来创建弹出框。
title 属性的内容为弹出框的标题，data-content 属性显示了弹出框的文本内容

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>弹出框实例</h3>
  <a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框内容">多次点我</a>
</div>

<script>
$(document).ready(function(){
     
    $('[data-toggle="popover"]').popover();   
});
</script>

</body>
</html>

1.2 指定弹出框的位置

默认情况下弹出框显示在元素右侧。
可以使用 data-placement 属性来设定弹出框显示的方向: top, bottom, left 或 righ

<div class="container">
  <h3>弹出框实例</h3> <br><br><br><br><br><br>
  <a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">点我</a>
  <a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">点我</a>
  <a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">点我</a>
  <a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">点我</a>
</div>

<script>
$(document).ready(function(){
     
    $('[data-toggle="popover"]').popover();   
});
</script>

1.3 关闭弹出框

默认情况下，弹出框在再次点击指定元素后就会关闭，你可以使用 data-trigger=“focus” 属性来设置在鼠标点击元素外部区域来关闭弹出框

<div class="container">
  <h3>弹出框实例</h3> <br>
  <a href="#" title="取消弹出框" data-toggle="popover" data-trigger="focus" data-content="点击文档的其他地方关闭我">点我</a>
</div>

<script>
$(document).ready(function(){
     
    $('[data-toggle="popover"]').popover();   
});
</script>

提示:如果你想实现在鼠标移动到元素上显示，移除后消失的效果，可以使用 data-trigger 属性，并设置值为 “hover”:

<div class="container">
  <h3>弹出框实例</h3> <br>
  <a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="一些内容">鼠标移动到我这</a>
</div>

<script>
$(document).ready(function(){
     
    $('[data-toggle="popover"]').popover();   
});
</script>

本文链接：https://blog.csdn.net/qq_27870421/article/details/97260000

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

java.lang.ClassNotFoundException：如何解决-程序员宅基地

文章浏览阅读7.2w次，点赞10次，收藏41次。本文适用于当前面临java.lang.ClassNotFoundException挑战的Java初学者。它将为您提供此常见Java异常的概述，这是一个示例Java程序，可支持您的学习过程和解决策略。如果您对与更高级的类加载器相关的问题感兴趣，我建议您复习有关java.lang.NoClassDefFoundError的文章系列，因为这些Java异常密切相关。 java.lang..._java.lang.classnotfoundexception:

串口通信数据帧_一帧数据-程序员宅基地

文章浏览阅读1.2k次，点赞9次，收藏17次。不同的设备间建立连接往往需要通信，而串口通信是十分常用的一种。UART串口通信需要两根线来实现，一根用于串口发送，另外一更用于串口接收。UART串口发送或者接收过程中一帧数据包括1位起始位、8位数据位、1位停止位，为了提高数据的可靠性可以在停止位前加上1位奇偶校验位。串口通信虽然十分简单，但是在不同设备间发送的数据往往不止1个字节，往往需要多个字节组成的数据包。当我们按照数据包发送时我们需要考虑到以及，因此我们可以采用定义数据帧的方式解决上述两个问题。_一帧数据

代码编辑快捷键使用说明_改代码快捷键-程序员宅基地

文章浏览阅读1.4k次。1、Ctrl+←或→ ：跳过（左边或右边）一个光标相邻的单词或词组(标点符号相当于一个单词)。点击前光标位置：点击后光标位置：2、Shift+←或→：选中（左边或右边）一个光标相邻的字符。点击前显示：点击后显示： 3、Shift+Ctrl+←或→：选中（左边或右边）一个光标相邻的单词或词组(标点符号相当于一个单词)。点击前显示：点击后显示：4、Home/End：光标定位到当前行的行头/行尾。点击前:点击Home后:点击End后:5、Ctrl+Home/End：从光标所在位置直接回到当前文件开头/结尾。点击前_改代码快捷键

【课上笔记】第七章树与森林_树和森林的区别-程序员宅基地

树是一个有n个有限数据元素的集合，其中有一个根节点，并且每个节点可以有多个子节点。树的深度与查找有关，可通过改进合并算法来减少树的深度，提高算法效率。

【信贷风控30分钟精通39】风控策略体系搭建2-程序员宅基地

文章浏览阅读938次，点赞23次，收藏21次。反欺诈策略是为防范恶意客户采取欺诈行为谋取利益而制订的策略，目的是通过对欺诈行为的识别，遏制欺诈风险，为金融机构止损。根据欺诈的不同维度，欺诈的分类目前，应对欺诈风险的有效措施包括反欺诈规则和反欺诈模型。

yum安装及配置_安装yum-程序员宅基地

文章浏览阅读10w+次，点赞40次，收藏332次。yum是用来管理rpm的，就跟maven管理jar包相似。yum源（库）分为本地库、网络库。首先要配置yum源，可支持多个源。先查看一下挂载情况：df -h这里我们要更换光盘，并挂载：mount /dev/cdrom /mnt（如果不能成功挂载，点击一下连接即可）之后再次使用 df -h命令，就能查看到光盘的内容。下面我们cd到 /mnt下查看一下：首先关注一下Pa..._安装yum

随便推点

TCP/UDP常见端口参考_怎么查看端口映射的是tcp还是udp-程序员宅基地

文章浏览阅读1.7k次。端口列表一览端口号码 / 层名称注释 1 tcpmux TCP 端口服务多路复用 5 rje 远程作业入口 7 echo Echo 服务 9 discard 用于连接测试的空服务 11 systat 用于列举连接了的端口的系统状态 13 daytime 给请求主机发送日期和时间 17 qotd 给连接了的主机发送每日格言 18 msp 消息发送协议 19 _怎么查看端口映射的是tcp还是udp

优化微信小程序音频播放，实现多音频同时播放，互不干扰。_微信小游戏 inneraudiocontext 数量限制-程序员宅基地

文章浏览阅读1.1w次。_微信小游戏 inneraudiocontext 数量限制

android JSBridge 漏洞挖掘_adnroid jsbridge 不安全的资源引用-程序员宅基地

文章浏览阅读825次。一、概述1. JSBridge介绍什么是JSBridge主要是给 JavaScript 提供调用 Native 功能的接口，让混合开发中的前端部分可以方便地使用 Native 的功能（例如：地址位置、摄像头）。而且 JSBridge 的功能不止调用 Native 功能这么简单宽泛。实际上，JSBridge 就像其名称中的Bridge的意义一样，是 Native 和非 Native 之间的桥梁，它的核心是构建 Native 和非 Native 间消息通信的通道，而且这个通信的通道是双向的。双向通信的通_adnroid jsbridge 不安全的资源引用