参考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: 1;
            z-index: 1060;
            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: 0;
            height: 0;
            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: 0;
        }

        .triangle.down:after {
            bottom: 1px;
            margin-left: -10px;
            content: " ";
            border-top-color: #fff;
            border-width: 10px;
            border-bottom-width: 0;
        }

        .triangle.top {
            top: -10px;
            margin-left: 51px;
            border-bottom-color: #999;
            border-bottom-color: rgba(0, 0, 0, .25);
            border-top-width: 0;
        }

        .triangle.top:after {
            top: 1px;
            bottom: 1px;
            margin-left: -10px;
            content: " ";
            border-width: 10px;
            border-top-width: 0;
            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: 0;
            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: 0;
            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: 0;
        }

        .triangle.right:after {
            content: " ";
            border-width: 10px;
            bottom: -10px;
            left: 1px;
            border-right-color: #fff;
            border-left-width: 0;
        }
    </style>

 

posted @ 2016-12-22 15:50  爱喝酸奶的吃货  阅读(2547)  评论(2)  编辑  收藏  举报