参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图:
小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的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画消息弹框的更多相关文章
- 【CSS】Bootstrap中select2+popover冲突
网上搜索得到: It changes the position because the position is based on the popover's dimansions and select ...
- JS浏览器的三种弹框:
1.alert:使用alert弹框提示信息,最后都会被转化为字符串输出(因为调用了toString这个方法).比如alert(1+1)弹出的结果应该是字符串形式的“2”. 2.Confirm:在ale ...
- css画一个提示框
用css画一个如下图的提示框: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- 用php脚本给html中引用的js和css路径打上版本
比如 <link rel="stylesheet" type="text/css" href="./css/globel.css"&g ...
- java-项目中无法访问js、css等静态资源
解决方法:在mvc.xml配置文件中增加如下配置 如果增加<mvc:default-servlet-handler/> 后无法访问controller,需要增加<mvc:annota ...
- django模板中如何导入js、css等外部文件
本教程只适合Django1.4版本.(1.8版本之后不需要这么麻烦,详见 http://www.cnblogs.com/ryan255/p/5465608.html) html模板里面使用了css,但 ...
- 通过js写一个消息弹框
prompt(data,time) { let alertForm = document.createElement('div'); alertForm.id="promptBox" ...
- 在iphone的safari浏览器中,拨打电话,出现系统异常弹框
这是系统级别的问题,暂时无法解决. IPHONE的safari浏览器电话拨打,前两次点击拨打按钮,会正常弹出系统弹框包含(电话号码,取消,呼叫). 第3次往后,点击按钮会出现另一种系统弹框包含(已阻止 ...
- 【转】在ASP.NET MVC中,使用Bundle来打包压缩js和css
在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原 ...
随机推荐
- iOS总结_UI层自我复习总结
UI层复习笔记 在main文件中,UIApplicationMain函数一共做了三件事 根据第三个参数创建了一个应用程序对象 默认写nil,即创建的是UIApplication类型的对象,此对象看成是 ...
- Castle Core 4.0.0 alpha001发布
时隔一年多以后Castle 项目又开始活跃,最近刚发布了Castle Core 4.0.0 的alpha版本, https://github.com/castleproject/Core/releas ...
- logstash file输入,无输出原因与解决办法
1.现象 很多同学在用logstash input 为file的时候,经常会出现如下问题:配置文件无误,logstash有时一直停留在等待输入的界面 2.解释 logstash作为日志分析的管道,在实 ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
- 在你的ASP.NET MVC中使用查找功能
在程序中,使用查找功能是少之不了.今天在ASP.NET环境下演示一回. 在cshtml视图中,有三个文本框,让用户输入关键词,然后点击最右连的“搜索”铵钮,如果有结果将显示于下面. Html: 表格放 ...
- .NET面试题集锦②(Part 二)
一.前言部分 文中的问题及答案多收集整理自网络,不保证100%准确,还望斟酌采纳. 1.实现产生一个int数组,长度为100,并向其中随机插入1-100,并且不能重复. ]; ArrayList my ...
- bzoj3932--可持久化线段树
题目大意: 最近实验室正在为其管理的超级计算机编制一套任务管理系统,而你被安排完成其中的查询部分.超级计算机中的 任务用三元组(Si,Ei,Pi)描述,(Si,Ei,Pi)表示任务从第Si秒开始,在第 ...
- Function.prototype.toString 的使用技巧
Function.prototype.toString这个原型方法可以帮助你获得函数的源代码, 比如: function hello ( msg ){ console.log("hello& ...
- cesium自定义气泡窗口infoWindow
一.自定义气泡窗口与cesium默认窗口效果对比: 1.cesium点击弹出气泡窗口显示的位置固定在地图的右上角,默认效果: 2.对于习惯arcgis或者openlayer气泡窗口样式的giser来说 ...
- AutoMapper(二)
返回总目录 首先,先创建一个控制台项目,引用AutoMapper程序集,创建三个类User,UserDto,UserMappingProfile,下面的知识点的演示都以此项目为基础,代码分别如下: n ...