参考bootstrap中的popover.js的css画消息弹框

时间:2022-06-09 00:36:43

前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图:

参考bootstrap中的popover.js的css画消息弹框

小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考bootstrap中的popover.js的css画了下那个消息弹框,希望对大家有所帮助。小颖最终画的图就是下面介个酱紫的

参考bootstrap中的popover.js的css画消息弹框

具体的怎么实现的,大家请看下方的css代码哦。

html:

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>仿bootstrap中的popover.js的消息弹框</title>
</head> <body>
<div class="popovers-body">
<div class="popover-top">
<div class="popover">
<div class="popover-content">
向上的提示信息
</div>
</div>
<div class="triangle down"></div>
</div>
<div class="popover-down">
<div class="popover">
<div class="popover-content">
向下的提示信息
</div>
</div>
<div class="triangle top"></div>
</div>
<div class="popover-left">
<div class="popover">
<div class="popover-content">
向左的提示信息
</div>
</div>
<div class="triangle left"></div>
</div>
<div class="popover-right">
<div class="popover">
<div class="popover-content">
向右的提示信息
</div>
</div>
<div class="triangle right"></div>
</div>
</div>
</body> </html>

css:

    <style media="screen">
.popover-top,
.popover-down {
width: 300px;
float: left;
position: absolute;
top: 40px;
} .popover-top,
.popover-left {
left: 50px;
} .popover-down,
.popover-right {
left: 450px;
} .popover {
opacity:;
z-index:;
padding: 1px;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
white-space: normal;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
line-break: auto;
} .popover-content {
padding: 9px 14px;
} .triangle,
.triangle:after {
position: absolute;
display: block;
width:;
height:;
border-color: transparent;
border-style: solid;
} .triangle {
border-width: 11px;
} .triangle.down {
top: 39px;
margin-left: 51px;
border-top-color: #999;
border-top-color: rgba(0, 0, 0, .25);
border-bottom-width:;
} .triangle.down:after {
bottom: 1px;
margin-left: -10px;
content: " ";
border-top-color: #fff;
border-width: 10px;
border-bottom-width:;
} .triangle.top {
top: -10px;
margin-left: 51px;
border-bottom-color: #999;
border-bottom-color: rgba(0, 0, 0, .25);
border-top-width:;
} .triangle.top:after {
top: 1px;
bottom: 1px;
margin-left: -10px;
content: " ";
border-width: 10px;
border-top-width:;
border-bottom-color: #fff;
} .popover-left,
.popover-right {
width: 300px;
float: left;
position: absolute;
top: 150px;
} .triangle.left {
top: 19px;
right: -10px;
margin-top: -11px;
border-right-width:;
border-left-color: #999;
border-left-color: rgba(0, 0, 0, .25);
} .triangle.left:after {
border-width: 10px;
right: 1px;
bottom: -10px;
content: " ";
border-right-width:;
border-left-color: #fff;
} .triangle.right {
top: 50%;
left: -10px;
margin-top: -11px;
border-right-color: #999;
border-right-color: rgba(0, 0, 0, .25);
border-left-width:;
} .triangle.right:after {
content: " ";
border-width: 10px;
bottom: -10px;
left: 1px;
border-right-color: #fff;
border-left-width:;
}
</style>

参考bootstrap中的popover.js的css画消息弹框的更多相关文章

  1. 【CSS】Bootstrap中select2&plus;popover冲突

    网上搜索得到: It changes the position because the position is based on the popover's dimansions and select ...

  2. JS浏览器的三种弹框:

    1.alert:使用alert弹框提示信息,最后都会被转化为字符串输出(因为调用了toString这个方法).比如alert(1+1)弹出的结果应该是字符串形式的“2”. 2.Confirm:在ale ...

  3. css画一个提示框

    用css画一个如下图的提示框: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  4. 用php脚本给html中引用的js和css路径打上版本

    比如 <link rel="stylesheet" type="text/css" href="./css/globel.css"&g ...

  5. java-项目中无法访问js、css等静态资源

    解决方法:在mvc.xml配置文件中增加如下配置 如果增加<mvc:default-servlet-handler/> 后无法访问controller,需要增加<mvc:annota ...

  6. django模板中如何导入js、css等外部文件

    本教程只适合Django1.4版本.(1.8版本之后不需要这么麻烦,详见 http://www.cnblogs.com/ryan255/p/5465608.html) html模板里面使用了css,但 ...

  7. 通过js写一个消息弹框

    prompt(data,time) { let alertForm = document.createElement('div'); alertForm.id="promptBox&quot ...

  8. 在iphone的safari浏览器中,拨打电话,出现系统异常弹框

    这是系统级别的问题,暂时无法解决. IPHONE的safari浏览器电话拨打,前两次点击拨打按钮,会正常弹出系统弹框包含(电话号码,取消,呼叫). 第3次往后,点击按钮会出现另一种系统弹框包含(已阻止 ...

  9. 【转】在ASP&period;NET MVC中,使用Bundle来打包压缩js和css

    在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原 ...

随机推荐

  1. asp&period;net 之 数据库导入treeview

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  2. SSH基本框架搭建后的简化

    对于SSh框架的简化,我们可以从下面几个方面来剖析: 1.实体类entity:在这里我们需要将数据库和实体类进行关联,在简化之前,我们需要在entity包里面加入一份.xml配置文件 例如原码---- ...

  3. 从手机获取图片让WebView支持本地上传图片

    一,从本地获取相册中的图片,并获取图片的URI 从本地选择图片上传到服务器时,首先要打开本地图片或文件管理器选择要上传的文件,代码如下 Intent intent =newIntent(Intent. ...

  4. python栈的实现(入栈,出栈)

    #coding=utf-8 class Stack(): def __init__(st,size):#栈的初始化 st.stack=[]; st.size=size; st.top=-1 def p ...

  5. &lbrack;0&rsqb; WCF开发下,提示HTTP 无法注册 URL 进程不具有此命名空间的访问权限

    Visual Studio以管理员的身份运行就可以了.

  6. Web 性能优化:21 种优化 CSS 和加快网站速度的方法

    这是 Web 性能优化的第 4 篇,上一篇在下面看点击查看: Web 性能优化:使用 Webpack 分离数据的正确方法 Web 性能优化:图片优化让网站大小减少 62% Web 性能优化:缓存 Re ...

  7. Docker 下载镜像

    文章首发个人网站: https://www.exception.site/docker/docker-pull-image 本文中,我们将需要学习 Docker 如何下载镜像? 一.前言 大家都知道, ...

  8. python3 配置logging日志类

    配置类config_file: from configparser import ConfigParser class config_file: def __init__(self,conf_file ...

  9. ssh-remote-port-forwarding

    1.ssh免密码登录(A登录到B) 1.1.在A上执行并在~/.ssh下生成id_rsa和id_rsa.pub两个文件 ssh-keygen -t rsa -P '' 1.2.拷贝id_rsa.pub ...

  10. listen&lpar;&rpar;函数中backlog参数分析

    实例分析1 将服务器端的listen函数backlog设置为2,用20个客户端与服务器建立连接,查看连接的建立情况. 服务器代码: #include <stdio.h> #include& ...