Bootstrap弹出框中插入图片

一时心血来潮,给博客增加一个打赏功能,看了下大家的打赏按钮,主要分两种,一种是两端是赞和分享中间是打赏的按钮形式,另外一种是孤单的一个打赏按钮。原本想用第一种的,发现我的博客没规划文章赞赏,也懒的做分享,放弃了改用第二种方案。刮了下@滑稽沈的,打算扒一个下来,看到代码的时候想起来,这些主题都不是bootstrap的呀,扒完HTML还得自己写样式,还不如我直接写呢。所以有了这篇水文,话不多说开干。

首先准备html

bootstrap官方文档中弹出框实例演示中,我需要向上弹出的。拷贝实例代码,我们都知道bootstrap的组件都是通过data-属性驱动的,其中data-content即弹出内容。默认只能弹出文字。图一是手册上的实例代码,图二是我页面上的结构,需要说明的是组件需要通过按钮触发,可以使用button也可以像我一样使用span加个button属性也可。另外删除data-container属性和data-content属性,后面我们通过传入参数触发。

初始化弹出层组件

为什么要初始化,Bootstrap官方给出的理由是由于新能的原因,工具提示和弹出框的接口需要手动初始化。所以根据手册上的提示,直接拷贝初始化代码即可,手册中的代码是对当前页面上的所有相同组件一起初始化,当然你也可以单独初始化某一个组件,方法就是使用jquery的属性操作即可。我偷懒就不改了,直接照搬,如图。

向组件传递参数

根据手册给定的参数表,我们需要这几项,图中被圈中的参数。其中animation淡入淡出,container弹出层所在的页面元素。content弹出内容,html弹出层中嵌入html代码。图二中content参数请自行修改,我这个是ThinkPHP的模版调用。

修改CSS

在bootstrap.css中搜索popover,拷贝整段,修改必要的参数,可以按照自己的需求修改。我这里主要是修改宽度高度和投影及距离。

好了,这样就完成了弹出层嵌入图片的操作。demo如本文下面的打赏按钮。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏机器学习从入门到成神

Vue.js的bind报错解决

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_35512245/articl...

26110
来自专栏DannyHoo的专栏

底牌项目中上传牌谱功能之编辑标准模式

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/de...

13330
来自专栏pangguoming

Angular2 -- 生命周期钩子

指令和组件的实例有一个生命周期:新建、更新和销毁。 每个接口都有唯一的一个钩子方法,它们的名字是由接口名加上 ng前缀构成的。比如,OnInit接口的钩子方法...

11320
来自专栏hightopo

快速开发基于 HTML5 网络拓扑图应用--入门篇(一)

31440
来自专栏React Native开发圈

React Native面试知识点

本文会不定期不断更新,想查看最新版本请移步至https://github.com/forrest23/react-native-interview

32610
来自专栏从零开始学自动化测试

Selenium2+python自动化24-js处理富文本

前言 上一篇Selenium2+python自动化23-富文本(自动发帖)解决了富文本上iframe问题,其实没什么特别之处,主要是iframe的切换,...

30550
来自专栏ccylovehs

JavaScript防抖节流函数

防止一个事件频繁触发回调函数的方式: 防抖动:将几次操作合并为一此操作进行。原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发...

18220
来自专栏finleyMa

React 技巧及学习资料

https://doc.react-china.org/ 翻译后的官方文档,学技术一定要多看几遍文档

20110
来自专栏夏时

使用PHP抓取Bing每日图像并为己所用

23330
来自专栏每日一篇技术文章

go - os包 彻头彻尾用法使用

os包提供了操作系统函数的不依赖平台的接口。设计为Unix风格的,虽然错误处理是go风格的;失败的调用会返回错误值而非错误码。通常错误值里包含更多信息。例如,如...

32560

扫码关注云+社区

领取腾讯云代金券