前段時間小穎的大學同學給小穎發了一張截圖,圖片類似下面這張圖：
小穎當時大概的給她說了下，其實小穎也不知道上面那個三角形怎么畫嘻嘻，給她說了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>