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

小颖当时大概的给她说了下，其实小颖也不知道上面那个三角形怎么画嘻嘻，给她说了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画消息弹框的更多相关文章

  1. 【CSS】Bootstrap中select2+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" ...

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

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

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

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

随机推荐

  1. 异步任务队列Celery在Django中的使用

    前段时间在Django Web平台开发中,碰到一些请求执行的任务时间较长(几分钟),为了加快用户的响应时间,因此决定采用异步任务的方式在后台执行这些任务.在同事的指引下接触了Celery这个异步任务队 ...

  2. EntityFramework Core Raw SQL

    前言 本节我们来讲讲EF Core中的原始查询,目前在项目中对于简单的查询直接通过EF就可以解决,但是涉及到多表查询时为了一步到位就采用了原始查询的方式进行.下面我们一起来看看. EntityFram ...

  3. 首个threejs项目-前端填坑指南

    第一次使用threejs到实际项目中,开始的时候心情有点小激动,毕竟是第一次嘛,然而做着做着就感受到这玩意水好深,满满的都是坑,填都填不过来.经过老板20天惨无人道的摧残,终于小有成就. 因为第一次搞 ...

  4. C语言 · 乘法表

    问题描述 输出九九乘法表. 输出格式 输出格式见下面的样例.乘号用"*"表示. 样例输出 下面给出输出的前几行:1*1=12*1=2 2*2=43*1=3 3*2=6 3*3=94 ...

  5. 前端学HTTP之Web主机托管

    前面的话 对内容资源的存储.协调以及管理的职责统称为Web主机托管.主机托管是Web服务器的主要功能之一.保存并提供内容,记录对内容的访问以及管理内容都离不开服务器.如果不想自行管理服务器所需的软硬件 ...

  6. SQL Server-聚焦APPLY运算符（二十七）

    前言 其实有些新的特性在SQL Server早就已经出现过,但是若非系统的去学习数据库你会发现在实际项目中别人的SQL其实是比较复杂的,其实利用新的SQL Server语法会更加方便和简洁,从本节开始 ...

  7. JavaScript动画-磁性吸附

    ▓▓▓▓▓▓ 大致介绍 磁性吸附是以模拟拖拽为基础添加一个拖拽时范围的限定而来的一个效果,如果对模拟拖拽有疑问的同学请移步模拟拖拽. 源代码.效果:点这里 ▓▓▓▓▓▓ 范围限定(可视区) 先来看一个 ...

  8. 带你实现开发者头条APP(四)---首页优化(加入design包)

    title: 带你实现开发者头条APP(四)---首页优化(加入design包) tags: design,Toolbar,TabLayout,RecyclerView grammar_cjkRuby ...

  9. [.NET] 利用 async & await 进行异步 IO 操作

    利用 async & await 进行异步 IO 操作 [博主]反骨仔 [出处]http://www.cnblogs.com/liqingwen/p/6082673.html  序 上次,博主 ...

  10. 通过VMware的PowerCLI配置集群内指定主机的vMotion功能

    PowerCLI是VMware开发的基于微软(MSFT)的PowerShell的命令行管理vSphere的实现,因此在批量化操作方面CLI会减轻很多GUI环境下的繁琐重复劳作. 现有场景中有大量的物理 ...